Acrool React Toaster
This is a toast message function for React development notifications
^3.2.0 support react >=18.0.0 <20.0.0
Features
- 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
Install
yarn add @acrool/react-toaster
Usage
add in your index.tsx
import "@acrool/react-toaster/dist/index.css";
add in your App.tsx
{
return (
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>
);
};
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
{
return (
);
};">import {toast} from '@acrool/react-toaster';
const Example = () => {
return (
<div>
<button type="button" onClick={() => toast({message: 'useToaster message'})}>
useToaster message
button>
div>
);
};
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: