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

1import toaster from "toasted-notes";
2import "toasted-notes/src/styles.css"; // optional styles
3
4const HelloWorld = () => (
5  <button
6    onClick={() => {
7      toaster.notify("Hello world", {
8        duration: 2000
9      });
10    }}
11  >
12    Say hello
13  </button>
14);

API

The notify function accepts either a string, a react node, or a render callback.

1// using a string
2toaster.notify("With a simple string");
3
4// using jsx
5toaster.notify(<div>Hi there</div>);
6
7// using a render callback
8toaster.notify(({ onClose }) => (
9  <div>
10    <span>My custom toaster</span>
11    <button onClick={onClose}>Close me please</button>
12  </div>
13));

It also accepts options.

1toaster.notify("Hello world", {
2  position: "bottom-left", // top-left, top, top-right, bottom-left, bottom, bottom-right
3  duration: null // This notification will not automatically close
4});

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.

1const CustomNotification = ({ title }) => {
2  const theme = useTheme();
3  return <div style={{ color: theme.primary }}>{title}</div>;
4};
5
6const CustomNotificationWithTheme = withTheme(CustomNotification);
7
8toaster.notify(() => <CustomNotificationWithTheme title="I am pretty" />);

Contributors

• Einar Löve

License

MIT

Prior art

Way back, this was originally based on the wonderful implementation of notifications in evergreen.