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:
