@acrool/react-dialog

Acrool React Dialog

This is a toast message function for React development notifications

Features

• Supports 5 status colors: default, success, info, warning, danger
• Call via global method
• Configurable disappearance delay seconds

Install

yarn add @acrool/react-dialog

Usage

add in your index.tsx

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

add in your App.tsx

import {DialogPortal} from "@acrool/react-dialog";

const App = () => {
    return (
        <div>
            <BaseUsed/>
            <DialogPortal timeout={3000}/>
        </div>
    );
};

then in your page

import {EStatus, toast} from '@acrool/react-dialog';

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

• toast
• toast.success
• toast.info
• toast.warning
• toast.error

There is also a example that you can play with it:

License

MIT © Acrool & Imagine