@snackstack/core

Component / state management library agnostic way to manage notifications

Installation

To install the latest stable version with npm, run the following command:

npm install @snackstack/core

Or if you're using yarn:

yarn add @snackstack/core

Setup

Once you have installed snackstack, import the SnackProvider and SnackStack component, as well as the SnackManager class.

Instantiate a new instance of the SnackManager class and optionally pass an options object of type SnackManagerOptions to its constructor.

Now that the manager is setup, wrap the SnackProvider around the parts of your application that should be able to manage and display notifications. The newly created SnackManager instance needs to be passed as value to the manager property on the provider.

Place the SnackStack component somewhere below the SnackProvider and specify a component used to render your notifications.

import React from 'react';
import ReactDOM from 'react-dom/client';
+ import { SnackProvider, SnackStack, SnackManager, SnackProps } from '@snackstack/core';

+ const snackManager = new SnackManager({ maxSnacks: 7 });

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
+   <SnackProvider manager={snackManager}>
      <App />

+     <SnackStack Component={MyNotification} />
+   </SnackProvider>
  </React.StrictMode>
);

+ const MyNotification = React.forwardRef<unknown, SnackProps>(({ message, offset }, ref) => {
+   return <div ref={ref} style={{ top: offset }}>{message}</div>;
+ });

⚠️ Note: If you are using a custom component, make sure you are forwarding a ref to a native element inside of it.

While this gives you full creative freedom to design your notification component, you might prefer a pre-built solution:

• @snackstack/mui: Adapter for Material UI

Learn more about displaying notifications

Managing notifications

Once setup, notifications can be managed through the SnackManager. You can either use the instance you previously instantiated or the useSnackManager hook (works only in components rendered below the SnackProvider).

+ import { useSnackManager } from '@snackstack/core';

function App() {
+ const manager = useSnackManager();

  const handleClick = () => {
+   manager.enqueue('A notification');
  };

  return <button onClick={handleClick}>Show notification</button>;
}

Learn more about managing notifications