Skip to main content
Version: 4.x

Notifications

useink/notifications is an extension of useink that provides an opinionated state management system for tracking the changing status of a transaction. When you add a notification it will live until the configured time to live has expired then will automatically be removed from state. This is useful for temporarily displaying a notification then having it removed in the view. useink/notifications does not contain any UI elements. It only tracks state. You can use this in combination with UI libraries or components of your choice.

Installation

You must first install useink. useink/notifications has its own import path in the

Configure tsconfig.json

You must set moduleResolution to nodenext or bundler. This feature allows your application to discover the useink/notifications import paths defined in the useink package.json.

{
"compilerOptions": {
"moduleResolution": "nodenext", // or `bundler`
}
}

Add NotificationsProvider

Notification state management is not in useink by default. You must wrap your application with <NotificationsProvider>.

import { NotificationsProvider } from 'useink/notifications'

const FIVE_SECONDS = 5000
const HALF_A_SECOND = 500

function App({ children }) {
return (
<NotificationsProvider config={{
expiration: FIVE_SECONDS, // default. This can be omitted
checkInterval: : HALF_A_SECOND, // default. This can be omitted
}}>
<MyRoutes />
</NotificationsProvider>
)
}

export default App

Configuring Notifications

If you want Notifications to live in state for ever, or until you remove them you can set the

import { NotificationsProvider } from 'useink/notifications'

const FIVE_SECONDS = 5000
const HALF_A_SECOND = 500

function App({ children }) {
return (
<NotificationsProvider config={{
expiration: FIVE_SECONDS, // default. This can be omitted
checkInterval: : HALF_A_SECOND, // default. This can be omitted
}}>
<MyRoutes />
</NotificationsProvider>
)
}

export default App

See configuration to learn about custom and default settings.