@acrool/react-dialog v1.0.0
Acrool React Dialog
Features
- Supports 5 status colors: default, success, info, warning, danger
- Call via global method
- Plug and unplug using
@acrool/react-portal
andframer-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:
License
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago