react-toasty-library

    1.0.4 • Public • Published

    Node.js Package

    React-Toasty-library github

    toasty.gif

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

    Installation

    $ npm i react-toasty-library
    

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

    $ git clone https://github.com/KoVaL0/toasty-library.git
    $ 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 (
          <div>
            <button onClick={notify}>Notify!</button>
            <ToastContainer />
          </div>
        );
      }
    

    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!');
    toast.info('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;

    Install

    npm i react-toasty-library

    DownloadsWeekly Downloads

    8

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    78.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • koval0