react-toasts is a very simple and lightweight component to create toasts.

Demo url : https://vashnak.co/react-toasts/

$ npm install -S react-toasts

You have to import 2 modules : ToastContainer and ToastStore

import {ToastContainer, ToastStore} from 'react-toasts';

function render(){
    return <div>
        <button onClick={() => ToastStore.error("There is an error :'(")}>Click me !</button>
        <ToastContainer store={ToastStore}/>
    </div>
}

ToastContainer is the container and ToastStore is the toasts manager.

You have to set the ToastStore as parameter of ToastContainer (example just before), it won't work if you forget it.

Now you can simply call one of the 4 functions of the ToastStore :

• success(message: string, timer?: number = 3000, classNames?: string) : green toast.
• info(message: string, timer?: number = 3000, classNames?: string) : white toast.
• warning(message: string, timer?: number = 3000, classNames?: string) : yellow toast.
• error(message: string, timer?: number = 3000, classNames?: string) : red toast.

Like this:

ToastStore.success('Hey, it worked !');

The timer parameter is optional and its default value is 3000ms. The classNames parameter is also optional, if you have multiple classes to add, please separate them with a space ("class1 class2 ...").

The container can have 6 positions, TOP_RIGHT, TOP_LEFT, TOP_CENTER, BOTTOM_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER. By default its position is BOTTOM_RIGHT. You can change it by using the property "position" on the ToastContainer element

<ToastContainer position={ToastContainer.POSITION.TOP_LEFT}/>

If you want toasts to have light color background, add lightBackground true property on the ToastrContainer element

<ToastContainer position={ToastContainer.POSITION.TOP_LEFT} lightBackground />

Now support line break in toasts (\n).

Added a class on each toasts.

Can now add custom classes to toasts.