@acrool/react-dialog

Acrool React Dialog

This is a dialog message function for React development dialog

Features

• Supports 5 status colors: default, success, info, warning, danger
• Call via global method
• Plug and unplug using @acrool/react-portal and framer-motion

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
                localeDictionaries={{
                    'en-US': {
                        'com.dialog.success': 'Success',
                        'com.dialog.error': 'Danger',
                        'com.dialog.info': 'Info',
                        'com.dialog.warning': 'Warning',
                        'com.dialog.confirm': 'Confirm',
                        'com.dialog.ok': 'OK',
                        'com.dialog.cancel': 'Cancel',
                    }
                }}
                locale="en-US"
                isVisibleStatusIcon
                renderButton={(args) => {
                    return <Button
                        className={args.className}
                        children={args.children}
                        color={args.color}
                        onClick={args.onClick}
                        isBlock
                        size="md"
                    />;
                }}
                renderTextField={(args) => {
                    return <TextField
                        {...args}
                        isAutoFocus
                    />;
                }}
            />
            
        </div>
    );
};

then in your page

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

const Example = () => {
    return (
        <div>
            <button type="button" onClick={() => dialog({message: 'step1 test dialog', code: 'TEST1'})}>
                useDialog message
            </button>
        </div>
    );
};

• dialog
• dialog.success
• dialog.info
• dialog.warning
• dialog.error
• dialog.confirm

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

License

MIT © Acrool & Imagine