@acrool/react-toaster NPM

Acrool React Toaster

^3.2.0 support react >=18.0.0 <20.0.0

Features

Supports 5 status colors: default, success, info, warning, danger
Support show limit
Support show position: top, bottom, left, center, right
Call via global method
Configurable disappearance delay seconds
Plug and unplug using @acrool/react-portal and framer-motion

Install

yarn add @acrool/react-toaster

Usage

add in your index.tsx

import "@acrool/react-toaster/dist/index.css";

add in your App.tsx

import {ToasterPortal, themeMap} from "@acrool/react-toaster";
import CustomCheckIcon from '../../../assets/custom_check.svg?react';


const App = () => {
    return (
        <div>
            <BaseUsed/>
            <ToasterPortal
                defaultTimeout={3000}
                limit={6}
                position={{
                    vertical: 'top',
                    horizontal: 'center',
                }}
                themeMap={{
                    ...themeMap,
                    success: {
                        ...themeMap.success,
                        icon: CustomCheckIcon,
                    }
                }}
            />
        </div>
    );
};

then in your page

import {toast} from '@acrool/react-toaster';

const Example = () => {
    return (
        <div>
            <button type="button" onClick={() => toast({message: 'useToaster message'})}>
                useToaster message
            </button>
        </div>
    );
};