1.0.0 • Published 8 months ago

@acrool/react-dialog v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Acrool React Dialog

NPM npm npm

npm downloads npm

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 framer-motion @acrool/react-dialog

in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)

"resolutions": {
    "framer-motion": "^11.x"
}

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 => createElement(Button, args, args.children)}
                renderTextField={args => createElement(TextField, args, null)}
            />
            
        </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:

Play react-editext-example

License

MIT © Acrool & Imagine

1.0.0

8 months ago

1.0.1-alpha.0

8 months ago

1.0.0-alpha.0

9 months ago

0.0.10

9 months ago

0.0.9-alpha.2

10 months ago

0.0.9-alpha.3

10 months ago

0.0.9-alpha.0

10 months ago

0.0.9-alpha.4

10 months ago

0.0.10-alpha.2

9 months ago

0.0.8-alpha.0

10 months ago

0.0.10-alpha.0

9 months ago

0.0.10-alpha.1

9 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.7-alpha.0

11 months ago

0.0.6

11 months ago

0.0.6-alpha.6

11 months ago

0.0.6-alpha.5

11 months ago

0.0.6-alpha.4

11 months ago

0.0.6-alpha.3

11 months ago

0.0.6-alpha.2

11 months ago

0.0.6-alpha.1

11 months ago

0.0.6-alpha.0

11 months ago

0.0.5

11 months ago

0.0.5-alpha.3

11 months ago

0.0.5-alpha.2

11 months ago

0.0.5-alpha.1

11 months ago

0.0.5-alpha.0

11 months ago

0.0.4

11 months ago

0.0.4-alpha.3

11 months ago

0.0.4-alpha.2

12 months ago

0.0.4-alpha.0

12 months ago

0.0.3

12 months ago

0.0.3-alpha.1

12 months ago

0.0.3-alpha.0

12 months ago

0.0.2

12 months ago

0.0.2-alpha.17

12 months ago

0.0.2-alpha.16

12 months ago

0.0.2-alpha.15

12 months ago

0.0.2-alpha.14

12 months ago

0.0.2-alpha.13

12 months ago

0.0.2-alpha.12

12 months ago

0.0.2-alpha.11

12 months ago

0.0.2-alpha.10

12 months ago

0.0.2-alpha.9

12 months ago

0.0.2-alpha.8

12 months ago

0.0.2-alpha.7

12 months ago

0.0.2-alpha.6

12 months ago

0.0.2-alpha.5

12 months ago

0.0.2-alpha.4

12 months ago

0.0.2-alpha.3

12 months ago

0.0.2-alpha.2

12 months ago

0.0.2-alpha.1

12 months ago

0.0.2-alpha.0

12 months ago

0.0.1

12 months ago