1.0.4 • Public • Published

    Node.js Package

    React-Toasty-library github


    Now integrating notifications into your project will be the easiest task. Also, you don't need to write big code to use the library!


    $ npm i react-toasty-library

    Note: Follow the instructions below to view the start page.

    $ git clone
    $ cd toasty-library
    $ npm i
    $ npm run build
    $ cd example
    $ npm i
    $ npm run start

    Main functionality:

    • Show notifications.
    • Ability to set the position of the notification.
    • Ability to set the type of notification (notification of success, error, alert, etc.).
    • Ability to set the duration of the notification.
    • Ability to set the description of the notification.
    • Ability to set notification indents.
    • Ability to change the color of the notification type.
    • Ability to change animation of appearance.
    • Show up to 3 notifications at the same time.

    Usage example:

     import React from 'react';
      import { ToastContainer, toast } from 'toasty-library';
      import react-toasty-library/dist/index.css';
      function App(){
        const notify = () => toast("Wow so easy!");
        return (
            <button onClick={notify}>Notify!</button>
            <ToastContainer />

    Possible parameter passing:

    toast.success('This contains the content of the notification!', {
        position: "topRight",
        color: "#000000",
        timeShow: "1500",
        animation: "wave",

    Possible types of notifications:

    toast.error('Toasty Error!');
    toast.success('Toasty Success!');
    toast.warning('Toasty Warning!');'Toasty Info!');

    You can change the indentation styles as follows (SCSS):

    This requires you to override the style classes in your root style file

    $indents: 3em;
    #toastContainer-bottomRight {
        bottom: $indents;
        right: $indents;
    #toastContainer-bottomLeft {
        bottom: $indents;
        left: $indents;
    #toastContainer-topRight {
        top: $indents;
        right: $indents;
    #toastContainer-topLeft {
        top: $indents;
        left: $indents;

    Note: When using CSS: bottom: 3em;


    npm i react-toasty-library

    DownloadsWeekly Downloads






    Unpacked Size

    78.1 kB

    Total Files


    Last publish


    • koval0