
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@snackstack/core
Advanced tools
To install the latest stable version with [npm](https://www.npmjs.com/get-npm), run the following command:
Component / state management library agnostic way to manage notifications
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
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:
Learn more about displaying 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>;
}
FAQs
To install the latest stable version with [npm](https://www.npmjs.com/get-npm), run the following command:
The npm package @snackstack/core receives a total of 1 weekly downloads. As such, @snackstack/core popularity was classified as not popular.
We found that @snackstack/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.