simple, flexible toast notifications for react
Branch: master
Clone or download
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.
demo/src
src
tests
.flowconfig
.gitignore
.npmignore
.travis.yml
CONTRIBUTING.md
README.md
nwb.config.js
package-lock.json
package.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

Install:

yarn add toasted-notes

Example

import toaster from 'toasted-notes';
import 'toasted-notes/umd/main.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
// assign the id attribute to the primary description for accessibility purposes
toaster.notify(({ onClose, id }) => (
  <div>
    <span id={id}>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: 0 // This notification will not automatically close
})