3.1.10 • Published 8 months ago
@acrool/react-toaster v3.1.10
Acrool React Toaster
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-portal
andframer-motion
Install
yarn add framer-motion @acrool/react-toaster
in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)
"resolutions": {
"framer-motion": "^11.x"
}
Usage
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}
limit={6}
position={{
vertical: 'top',
horizontal: 'center',
}}
/>
</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:
License
3.1.10
8 months ago
3.1.10-alpha.0
9 months ago
3.1.9
10 months ago
3.1.7-alpha.3
12 months ago
3.1.3
1 year ago
3.1.7-alpha.2
12 months ago
3.1.2
1 year ago
3.1.8-alpha.0
11 months ago
3.1.7
12 months ago
3.1.8-alpha.1
11 months ago
3.1.6
12 months ago
3.1.7-alpha.1
12 months ago
3.1.5
12 months ago
3.1.7-alpha.0
12 months ago
3.1.4
1 year ago
3.1.6-alpha.1
12 months ago
3.1.6-alpha.2
12 months ago
3.1.6-alpha.0
12 months ago
3.1.6-alpha.3
12 months ago
3.1.5-alpha.0
12 months ago
3.1.6-alpha.4
12 months ago
3.1.9-alpha.0
11 months ago
3.1.9-alpha.2
11 months ago
3.1.8
11 months ago
3.1.2-alpha.2
1 year ago