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 install this package, you need to have access to the private @sdk
npm scope.
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
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.