jix-toast-library
v1.0.59
Published
A library for adding toast notifications to your React project. To be able to use it you must have React, react-icons and styled-components installed.
Downloads
29
Readme
Toast library
A library for adding toast notifications to your React project.
To be able to use it you must have React, react-icons and styled-components installed.
How to use
import {Toasts, toastService} from 'jix-toast-library'
- Create state for keeping future toasts:
const [toasts, setToasts] = useState([]);
- Create a toast or some toasts using the next syntax:
toastService.createToast()
You also can manually setup your toasts:toastService.createToast({ title: someValue, //text (default depends on variant) text: someValue, //text variant: someValue, //possible: success (default), warning, info, danger color: someValue, //any color value (default depends on variant) iconAndTextColor: someValue, //any color value (default is #fafafa) position: someValue, //possible: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right (default) spacing: someValue, //from 0 to 200 animation: someValue, //possible: slideRight (default), fadeIn, bounceRight timer: someValue, //seconds })
- Use your state created on step 2 to save created toasts:
setToasts(toastService.getToasts());
- Use Toasts component to display your toasts (pass in your state from step 2 to the "toasts" prop):
<Toasts toasts={toasts} />