Easy, flexible toast notifications for React

Toasted notes provides completely configurable toast notifications for your React application and it uses an imperative API which makes it easy to invoke within error or event handlers.

Getting started

Install into your React project using Yarn or NPM.

yarn add toasted-notes

And import the toast module and the recommended CSS files.


import toast from 'toasted-notes' 
import 'toasted-notes/src/styles.css';

toast.notify('Hello world!')

Examples

Basic usage

Invoke a toast using the notify method with a message to display to the user. By default, the notification will appear at the top for a duration of three seconds.


toast.notify("Irure est ea deserunt labore ullamco est nisi labore in.");

Using different positions

You can display notifications in different positions, including top-left, top, top-right, bottom-left, bottom, and bottom-right.


[
  'top-left', 
  'top', 
  'top-right', 
  'bottom-left', 
  'bottom', 
  'bottom-right'
].forEach(position => {
  toast.notify("Using position " + position, {
    position
  });
});

Display indefinitely

When the user duration is set to null, the notification will appear indefinitely until manually closed by the user.


toast.notify("I will not disappear", {
  duration: null
});

Using a custom element

You can supply a custom element to render in replacement of the standard string.


toaster.notify(
  <Text gutter={false} variant="h3">
    This has much larger text!
  </Text>
);

Using a render callback

Using a render callback allows you to tap into the close function. It's your best option if you want to completely re-style your toast notification.


toaster.notify(({ onClose }) => (
  <a href="#" css={{ textDecoration: "none" }} onClick={onClose}>
    <Layer
      elevation="md"
      css={{
        overflow: "hidden",
        alignItems: "center",
        display: "flex"
      }}
    >
      <img src="https://randomuser.me/api/portraits/men/32.jpg" />
      <div css={{ padding: "1rem" }}>
        <Text variant="h5">Did you know?</Text>
        <Text css={{ display: "block" }}>
          You can customize the notification using a render
          callback.
        </Text>
      </div>
    </Layer>
  </a>
));

Learn more on Github

Created by Ben McMahen