You can add your react app and make fetching
Installation
Follow the instructions to install ToastJS-React
npm install toastjs-react
Usage
Add ToastJS-React CSS file to your index.js.
You must add your app components or elements between
import { ToastContainer } from 'toastjs-react'
import 'toastjs-react/index.css'
return (
<ToastContainer maxMessageCount={5} position="center">
<App />
</ToastContainer>);
You can limit your max toasts in your projects using below.
Change Your Maximum Toast
maxMessageCount={5} // Optional, default = 10
Change Your Toast Position
position={"left"|"right"|"center
You could have many toasts in your screen. ToastJS-React is going to add them to a queue. It will show them in order.
For example:
You have 8 toasts. And you set your max toast = 5 then firstly you are going to see 5 toasts until they become to fade out. Next,
you are going to see other 3 toasts.
// Import useGlobalMessage Hook
import { useGlobalMessage } from 'toastjs-react';
// Call It In Your Component
const toast = useGlobalMessage();
// And Show It!
toast.show({
type: "success",
message: "You have been added your item succesfully.",
autoCloseWithTimeout: true,
timeout: 2000,
});
Also, you can make fetching
fetchingOptions?:{
promise: Promise<any>
errorComponent: (response?:any)=>React.ReactElement
successComponent: (response?:any)=>React.ReactElement
response: (response: object, hasError: boolean) => void
}
If you want to learn a lot, visit to https://www.npmjs.com/package/toastjs-react?activeTab=readme
Top comments (0)