A simple but flexible implementation of toast style notifications for React extracted from Sancho UI.
View the demo and documentation.
Features
- 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
Install toasted-notes
and its peer dependency, react-spring
, using yarn or npm.
yarn add toasted-notes react-spring
Example
import toaster from "toasted-notes";import "toasted-notes/src/styles.css"; // optional styles const HelloWorld = <button = > Say hello </button>;
API
The notify function accepts either a string, a react node, or a render callback.
// using a stringtoaster; // using jsxtoaster; // using a render callbacktoaster;
It also accepts options.
toaster;
Using Context
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.
const CustomNotification = title const theme = ; return <div =>title</div>;; const CustomNotificationWithTheme = ; toaster;
Contributors
License
MIT
Prior art
Way back, this was originally based on the wonderful implementation of notifications in evergreen.