React Semantic Toasts

Simple and easy Semantic UI animated toast notifications for React

Installation

$ npm install --save react-semantic-toasts

Usage

Import the library into your project using ES6 module syntax

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

Render the SemanticToastContainer component:

render() {
    return <SemanticToastContainer />;
}

Fire as many notifications as you want

setTimeout(() => {
    toast(
        {
            title: 'Info Toast',
            description: 'This is a Semantic UI toast'
        },
        () => console.log('toast closed')
    );
}, 2000);

setTimeout(() => {
    toast({
        type: 'warning',
        icon: 'envelope',
        title: 'Warning Toast',
        description: 'This is a Semantic UI toast wich waits 5 seconds before closing',
        time: 5000
    });
}, 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.

<SemanticToastContainer position="top-right" />

Toast

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

toast(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

License

JDLT-Ltd/react-semantic-toasts

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages