How to show Toast Messages in React

Toasts are user interface elements commonly used in software applications, especially in mobile app development and web development, to display brief, non-intrusive messages or notifications to users. They typically appear as small, rectangular pop-up windows that appear temporarily at the bottom or top of the screen.

Key Characteristics of Toasts Messages

1. Brief Messages: Toasts are designed to convey short and concise messages to users, such as alerts, notifications, or confirmation messages.
2. Non-intrusive: Toasts are displayed temporarily and do not disrupt the user’s workflow. They appear briefly and then disappear automatically after a predefined duration, typically a few seconds.
3. Visually Distinct: Toasts often have a distinctive appearance, such as a colored background, an icon, and text, to make them stand out from the rest of the interface.
4. Interactive: In some cases, toast messages may be interactive, allowing users to perform actions, such as dismissing the message or tapping on it to navigate to a related screen.

To show toast message in React, we can use the react-toastify package.

React Toastify is a popular and easy-to-use library for adding toast notifications to React applications. Toast notifications are temporary, non-intrusive messages that inform users about actions, events, or other important information. They are typically displayed at the top or bottom of the screen and disappear after a short time.

React Toastify provides a simple and flexible API to integrate toast notifications into your application. In this article, we will explore how to set up and use React Toastify, and provide code examples to demonstrate its features.

Installation

First, you’ll need to install the React Toastify package. You can do this using npm or yarn:

npm install --save react-toastify

Or

yarn add react-toastify

Additionally, you will need to import the CSS file provided by React Toastify in your main application file (e.g., index.js or App.js):

import 'react-toastify/dist/ReactToastify.css';

Basic Usage

To use React Toastify, you need to import the library and the ToastContainer component into your React component:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
    // Function to display a toast notification
    const notify = () => {
        toast('Hello, this is a toast notification!');
    };

    return (
        <div>
            <button onClick={notify}>Show Toast</button>
            <ToastContainer />
        </div>
    );
}

export default App;

In the code above, we define a function notify() that triggers a toast notification with the message “Hello, this is a toast notification!” when the button is clicked. The ToastContainer component is included in the app to manage the display of toast notifications.

Customizing Toast Notifications

React Toastify provides a variety of options to customize the appearance and behavior of toast notifications. Here are some examples:

1. Positioning: You can specify the position of the toast notification using the position prop in the ToastContainer:

<ToastContainer position="top-right" />

Possible values include:

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

2. Duration: By default, toast notifications disappear after 5 seconds. You can change the duration using the autoClose prop:

toast('This will last for 3 seconds', { autoClose: 3000 });

3. Types: You can display different types of toast notifications, such as success, error, info, and warning:

toast.success('Success message!');
toast.error('Error message!');
toast.info('Information message!');
toast.warn('Warning message!');

4. Styling: You can customize the appearance of toast notifications using inline styles or CSS classes:

toast('Styled toast', {
    style: {
        backgroundColor: 'pink',
        color: 'white',
    },
    className: 'custom-toast',
});

Summary:

React Toastify is a versatile library that simplifies the process of adding toast notifications to React applications. With its easy-to-use API and customizable options, you can create visually appealing and informative notifications for your users. By using the examples provided in this article, you can quickly get started with React Toastify and enhance your application’s user experience.

The relationship between JavaScript and Node.js

Kene Samuel