React Semantic Toasts

Simple and easy Semantic UI animated toast notifications for React

Installation

1$ npm install --save react-semantic-toasts

Usage

Import the library into your project using ES6 module syntax

1import { SemanticToastContainer, toast } from 'react-semantic-toasts';

Render the SemanticToastContainer component:

1render() {
2    return <SemanticToastContainer />;
3}

Fire as many notifications as you want

1setTimeout(() => {
2    toast(
3        {
4            title: 'Info Toast',
5            description: 'This is a Semantic UI toast'
6        },
7        () => console.log('toast closed')
8    );
9}, 2000);
10
11setTimeout(() => {
12    toast({
13        type: 'warning',
14        icon: 'envelope',
15        title: 'Warning Toast',
16        description: 'This is a Semantic UI toast wich waits 5 seconds before closing',
17        time: 5000
18    });
19}, 5000);

API

Toast Container

The <SemanticToastContainer> receives an optional position prop, which can be one of top-right, top-center, top-left, bottom-right, bottom-center or bottom-left.

The type of animation can be specifed using an optional animation prop. If not present, will be derived from the container position.

1<SemanticToastContainer position="top-right" />

Toast

The toast notification function receives a toast options and a callback function as arguments:

1toast(options, cb);

Toast Options

• title - The header of the toast
• description - The content of the toast
• type - Can be one of info, success, warning, or error
• icon - Override the default icon
• time - Duration to keep the toast open, 0 to wait until closed by the user

License

Licensed under MIT