Toasted-notes NPM

A simple but flexible implementation of toast style notifications for React extracted from Sancho UI.

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
    onClick={() => {
      toaster.notify("Hello world", {
        duration: 2000
      });
    }}
  >
    Say hello
  </button>
);

API

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

// using a string
toaster.notify("With a simple string");

// using jsx
toaster.notify(<div>Hi there</div>);

// using a render callback
toaster.notify(({ onClose }) => (
  <div>
    <span>My custom toaster</span>
    <button onClick={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-right
  duration: null // This notification will not automatically close
});

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 = useTheme();
  return <div style={{ color: theme.primary }}>{title}</div>;
};

const CustomNotificationWithTheme = withTheme(CustomNotification);

toaster.notify(() => <CustomNotificationWithTheme title="I am pretty" />);