React Semantic Toasts

Simple and easy Semantic UI animated toast notifications for React

Installation

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

Usage

The library does not depend on semantic-ui-css anymore, make sure to import semantic.min.css or at the very least, to include the following components:

1import 'semantic-ui-css/components/reset.min.css';
2import 'semantic-ui-css/components/site.min.css';
3import 'semantic-ui-css/components/container.min.css';
4import 'semantic-ui-css/components/icon.min.css';
5import 'semantic-ui-css/components/message.min.css';
6import 'semantic-ui-css/components/header.min.css';

Import the library into your project using ES6 module syntax:

1import { SemanticToastContainer, toast } from 'react-semantic-toasts';
2import 'react-semantic-toasts/styles/react-semantic-alert.css';

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: <p>This is a Semantic UI toast</p>
6        },
7        () => console.log('toast closed'),
8        () => console.log('toast clicked'),
9        () => console.log('toast dismissed')
10    );
11}, 1000);
12
13setTimeout(() => {
14    toast({
15        type: 'warning',
16        icon: 'envelope',
17        title: 'Warning Toast',
18        description: 'This is a Semantic UI toast wich waits 5 seconds before closing',
19        animation: 'bounce',
20        time: 5000,
21        onClose: () => alert('you close this toast'),
22        onClick: () => alert('you click on the toast'),
23        onDismiss: () => alert('you have dismissed this toast')
24    });
25}, 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 with any supported SemanticUI animation value. If not present, will be derived from the container position.

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

Max Toasts

Supply the maxToasts prop to <SemanticToastContainer> to control the amount of toasts visible at any given time.

• maxToasts - The amount of toasts to display at once. On new toasts, the toaster will dismiss the oldest toast to say within the limit.

1<SemanticToastContainer position="top-right" maxToasts={3}/>

Toast

The toast notification function receives a toast options object and optional close, click and dismiss callbacks as function arguments:

1toast(options, onClose, onClick, onDismiss);

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
• color - Override color with semantic values
• size - Size of toast with semantic values
• list - Array of strings for showing an item menu inside the toast
• time - Duration to keep the toast open, 0 to wait until closed by the user
• onClose - The function that will be called when the toast is closed (either if you have clicked the close sign or if the toast has been closed after time has passed)
• onClick - The function that will be called when you click on the toast
• onDismiss - The function that will be called when you click to close the toast. onClose function will be called afterwards.
• animation - Override the default toast container animation

License

Licensed under MIT