Skip to content
simple, flexible toast notifications for react
Branch: master
Clone or download
Pull request Compare This branch is 14 commits behind bmcmahen:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
src
tests
.gitignore
.npmignore
.travis.yml
CONTRIBUTING.md
README.md
package.json
tsconfig.lib.json
yarn.lock

README.md

Toasted Notes

Travis npm package Coveralls

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

Install:

yarn add toasted-notes

Example

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

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
})
You can’t perform that action at this time.