Toast Pop-up Alert in React

Hello everyone, in this article I will handle one of the alert message libraries “react-hot-toast”.

Installation

With yarn

yarn add react-hot-toast

With npm

npm install react-hot-toast

After installation, lets take a look at it deeper and see some usages.

Import in a component

import {toast, Toaster} from 'react-hot-toast'

Properties of toast

Message: A simple string. First parameter of function “toast”.

Options: Optional, JSON object typed, second argument of toast function. Includes ariaProps, className,duration, icon,iconTheme, id, position and style.

Position: Where your messages will be shown. Passed as a string. Default value is “top-center”.

Totally 6 options for this prop:

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

Duration: Number value, in terms of milisecond.

If you do not assign any value for duration, loading toast (toast.loading( )) remains on the screen until the page is refreshed.

Style: Stying of your toast notification.

Let’s take a look at some examples.

Return block of function

return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
      }}
    >
      <button
        onClick={showErrors}
        style={{
          background: 'blue',
          color: 'white',
          border: 'none',
          width: '150px',
          borderRadius: 10,
          height: '30px',
          fontSize: 18,
        }}
      >
        Show Errors
      </button>

      <Toaster />
    </div>
  );

showErrors( )

const showErrors: any = () => {
    toast.error('Error bottom center', {
      position: 'bottom-center',
      duration: 4000,
    });
    toast.success('Success bottom center', {
      position: 'bottom-center',
      duration: 4000,
    });
    toast.error('Error top center', {
      position: 'top-center',
      duration: 4000,
    });
    toast.success('Success top center', {
      position: 'top-center',
      duration: 4000,
    });
    toast.error('Error bottom left', {
      position: 'bottom-left',
      duration: 4000,
    });
    toast.success('Success bottom right', {
      position: 'bottom-right',
      duration: 3000,
    });
    toast.loading('loading toast', {
      position: 'top-left',
      duration: 3000,
    });
  };

How our screen looks after calling showErrors( ) function

Thanks for reading my article.

Let’s meet in my next articles.
Please comment and share your opinions with me.
Have a nice day.

#edutech