ToastJS and Fetching with React apps

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