This is a dialog message function for React development dialog
^1.1.0 support react >=18.0.0 <20.0.0
- Supports 5 status colors: default, success, info, warning, danger
- Call via global method
- Plug and unplug using
@acrool/react-portalandframer-motion
yarn add framer-motion @acrool/react-dialogadd 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:
