toastjs-react

 // Import useGlobalMessage Hook
 import { useGlobalMessage } from 'toastjs-react';
 
 // Call It In Your Component
 const toast = useGlobalMessage();

 // And Show It!
 toast.show({
    type: "success",
    message: "You have been added your item succesfully.",
    autoCloseWithTimeout: true,
    timeout: 2000,
});

    {
        // Message Which Will Be Shown
        message:string,

        // Type
        type:"info"|"error"|"success"|"warning",

        /* 
        * You can add a timeout for your toast. After this time it will be fade out. 
        * Optional, default = 1000ms
        */
        timeout:number,

        /*
        * If you want to close your toast after timeout. You must set it as "true".
        * Optional, default = false
        */
        autoCloseWithTimeout:boolean,

        /*
        * There is an animation in your toast but you can deactive it below.
        * Optional
        */
        animation:{
            /* 
            * If you do not want to any animation. Set it as "false".
            * Optional, default = true 
            */
            slideAnimation:boolean

            /*
            * You can also add a duration for your animation.
            * Optional, default = 1000
            */
            animationDuration:number
        },

        /*
        * This is your header. You can add an element. It would change depends your type.
        * If you want to custom header change it.
        * Optional, default = null
        */
        header:React.ReactElement,

        /*
        * This is your body. You can add an element.
        * If you want to custom body change it.
        * Optional, default = null
        */
        body:React.ReactElement,

        /*
        * You can change your toast class name with this properties.
        * Optional, default = ".message_wrapper"
        */
        className:string,

        /*
        * This is title of toast. Depends your type.
        * If you want to custom title change it.
        * Optional, default = ""
        */
        title:string,

        /*
        * This is button of toast.
        * Optional
        */
        button:{
            /* 
            * Change class name for your custom style. 
            * Optional, default = ""
            */
            className?:string,

            /* 
            * Change title for your custom button title. 
            * Optional, default = "OK"
            */
            title?:string
        },

        /*
        * You do not have to use our toast component. You can create a custom and define it.
        * Optional, default = null
        */
        Component?: React.FC,

        /*
        * You can use to fetch with promise
        * Also, you can take error or success response and no matter what 'hasError' is 
        * successComponent is for when the result is successfull otherwise errorComponent but if promise is in fetching, Component will be shown by default
        */
        fetchingOptions?:{
           promise: Promise<any>
           errorComponent: (response?:any)=>React.ReactElement
           successComponent: (response?:any)=>React.ReactElement
           response: (response: object, hasError: boolean) => void
        }

    }