This is a toast message function for React development notifications
^3.2.0 support react >=18.0.0 <20.0.0
- Supports 5 status colors: default, success, info, warning, danger
- Support show limit
- Support show position: top, bottom, left, center, right
- Call via global method
- Configurable disappearance delay seconds
- Plug and unplug using
@acrool/react-portalandframer-motion
yarn add @acrool/react-toasteradd in your index.tsx
import "@acrool/react-toaster/dist/index.css";add in your App.tsx
import {ToasterPortal, themeMap} from "@acrool/react-toaster"; import CustomCheckIcon from '../../../assets/custom_check.svg?react'; const App = () => { return ( <div> <BaseUsed/> <ToasterPortal defaultTimeout={3000} limit={6} position={{ vertical: 'top', horizontal: 'center', }} themeMap={{ ...themeMap, success: { ...themeMap.success, icon: CustomCheckIcon, } }} /> </div> ); };then in your page
import {toast} from '@acrool/react-toaster'; const Example = () => { return ( <div> <button type="button" onClick={() => toast({message: 'useToaster message'})}> useToaster message </button> </div> ); };- toast
- toast.success
- toast.info
- toast.warning
- toast.danger
There is also a example that you can play with it:
