This is a toast message function for React development notifications
- Supports 5 status colors: default, success, info, warning, danger
- Call via global method
- Configurable disappearance delay seconds
- Plug and unplug using
@acrool/react-portal
andframer-motion
yarn add @acrool/react-toaster
add in your index.tsx
import "@acrool/react-toaster/dist/index.css";
add in your App.tsx
import {ToasterPortal} from "@acrool/react-toaster";
const App = () => {
return (
<div>
<BaseUsed/>
<ToasterPortal defaultTimeout={3000}/>
</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: