DEV Community

Gökhan ERGEN
Gökhan ERGEN

Posted on

ToastJS and Fetching with React apps

#react #javascript #frontend #programming

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)