Simple and flexible toast notifications for react

Apr 10, 2019
Simple and flexible toast notifications for react

Toasted Notes

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

View demo Download Source


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


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