DEV Community

Gökhan ERGEN
Gökhan ERGEN

Posted on Edited on

ToastJS and Fetching with React apps

#programming #javascript #react #frontend

You can add your react app and make fetching

Installation

Follow the instructions to install ToastJS-React

npm install toastjs-react
Enter fullscreen mode Exit fullscreen mode

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>);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
});
Enter fullscreen mode Exit fullscreen mode

Image description

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
   }
Enter fullscreen mode Exit fullscreen mode

If you want to learn a lot, visit to https://www.npmjs.com/package/toastjs-react?activeTab=readme

Top comments (0)