https://www.npmjs.com/package/react-toast-lib
npm start
npm run storybook
npm run cypress:open
- Extract utility method initializeToastify from the lib
- Call this method and destruct toast-generating methods
- Extract ToastContainer-component to create a list of toasts
- If you want, write your custom method to create a toast (in this example it's a method notify)
- Once you created this function, call it wherever you want with additional config
// example in App.tsx
import { initializeToastify, ToastContainer } from 'react-toast-lib';
const { generateToast } = initializeToastify(); // it creates an instance of ToastService
const App = () => {
const notify = () =>
generateToast({
animationType: 'flip',
lifetime: 3000,
content: 'Test toast',
position: {
right: '1rem',
top: '0.5rem',
},
});
return (
<>
<button onClick={notify}>Notify</button>
<ToastContainer />
</>
);
};
export default App;
- generateToast() - generate custom toast
- generateSuccessfulToast() - generate success toast
- generateErrorToast() - generate error toast
- generateInfoToast() - generate info toast
- generateWarnToast() - generate warning toast
- animationType: flip/rotate/zoom/fill - set an animation of appear/disappear toast-state
- position: top/right/bottom/left - set a position of a toast
- content: string - set custom text filling
- lifetime: number - restrains a time of existence of a toast
- type: success/error/warn/info - set a type of a toast
- backColor: string - set a background color
- icon: URI-path/picture module - set an icon of a toast