A simple but flexible implementation of toast style notifications for React extracted from Sancho UI.
View the demo and documentation.
- An imperative API. This means that you don't need to set component state or render elements to trigger notifications. Instead, just call a function.
- Render whatever you want. Utilize the render callback to create entirely custom notifications.
- Functional default styles. Import the provided css for some nice styling defaults or write your own styles.
Install toasted-notes and its peer dependency, react-spring, using yarn or npm.
yarn add toasted-notes react-spring
importtoasterfrom"toasted-notes";import"toasted-notes/src/styles.css";// optional stylesconstHelloWorld=()=>(<buttononClick={()=>{toaster.notify("Hello world",{duration: 2000});}}>
Say hello
</button>);The notify function accepts either a string, a react node, or a render callback.
// using a stringtoaster.notify("With a simple string");// using jsxtoaster.notify(<div>Hi there</div>);// using a render callbacktoaster.notify(({ onClose })=>(<div><span>My custom toaster</span><buttononClick={onClose}>Close me please</button></div>));It also accepts options.
toaster.notify("Hello world",{position: "bottom-left",// top-left, top, top-right, bottom-left, bottom, bottom-rightduration: null// This notification will not automatically close});One downside to the current API is that render callbacks and custom nodes won't get access to any application context, such as theming variables provided by styled-components. To ensure that render callbacks have access to the necessary context, you'll need to supply that context to the callback.
constCustomNotification=({ title })=>{consttheme=useTheme();return<divstyle={{color: theme.primary}}>{title}</div>;};constCustomNotificationWithTheme=withTheme(CustomNotification);toaster.notify(()=><CustomNotificationWithThemetitle="I am pretty"/>);MIT
Way back, this was originally based on the wonderful implementation of notifications in evergreen.