Getting Started

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.