Notification SDK

Display React based notifications to the user.

Notification toasts usually spring up in a corner of the application and are automatically dismissed after a set time or if the user dismisses them.

Installation

To integrate the SDK Notification package into your project, use the following command with your preferred package manager:

npm install @sdk/notification react react-dom

pnpm add @sdk/notification react react-dom

yarn add @sdk/notification react react-dom

bun add @sdk/notification react react-dom

Then, wrap your app with the NotificationProvider to make notification logic accessible throughout your component tree:

import { NotificationProvider } from '@sdk/notification';
 
function App() {
  return (
    <NotificationProvider>
      <Component />
    </NotificationProvider>
  );
}

Triggering a Notification

After everything is set up, you’re able to trigger notifications fron anywhere using the createNotificationTrigger method.

createNotificationTrigger is a curried function, whose first argument relates to the notification placement and look and feel is optional.

import { useNotification } from '@sdk/notification';
 
function MyComponent() {
  const { createNotificationTrigger } = useNotification();
 
  const doSomethingNoteworty = () => {
    createNotificationTrigger({
      snackbarProps: {
        anchorOrigin: {
          vertical: 'top',
          horizontal: 'center',
        },
      },
      alertProps: {
        elevation: 6,
        sx: {
          position: 'relative',
          top: '80px',
        },
      },
    })({
      intent: 'info',
      content: `Something noteworthy happened!`,
    });
  };
}

Intent

Different configuration values are available to communicate an intent:

Handling Duplications

In some cases a notification could be triggered multiple times. For example if a notification is built that would pop up when the inernet connection is lost. To prevent the same notification to fill the screen, a key can be provided. The package will use this key to dedupe this notification.

createNotificationTrigger()({
  intent: 'error',
  content: `Internet Connection Lost`,
  key: 'offline',
});

This example notification will only show once even if the createNotificationTrigger function is called multiple times.