Toasted Notes

A super simple but flexible implementation of toast style notifications for React, initially based on the excellent implementation found in Evergreen.


yarn add toasted-notes


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


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 }) => (
    <span>My custom toaster</span>
    <button onClick={onClose}>Close me please</button>

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" />)