{"id":1959,"date":"2024-04-15T13:26:25","date_gmt":"2024-04-15T12:26:25","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=1959"},"modified":"2024-04-16T10:58:44","modified_gmt":"2024-04-16T09:58:44","slug":"introduction-to-react-toastify","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/introduction-to-react-toastify\/","title":{"rendered":"How to show Toast Messages in React"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Key Characteristics of Toasts Messages<\/h2>\n\n\n\n
    \n
  1. Brief Messages<\/strong>: Toasts are designed to convey short and concise messages to users, such as alerts, notifications, or confirmation messages.<\/li>\n\n\n\n
  2. Non-intrusive<\/strong>: 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.<\/li>\n\n\n\n
  3. Visually Distinct<\/strong>: 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.<\/li>\n\n\n\n
  4. Interactive<\/strong>: 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.<\/li>\n<\/ol>\n\n\n\n

    To show toast message in React, we can use the react-toastify package.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    Installation<\/h3>\n\n\n\n

    First, you’ll need to install the React Toastify package. You can do this using npm or yarn:<\/p>\n\n\n\n

    npm install --save react-toastify
    <\/code><\/pre>\n\n\n\n
    Or<\/p>\n\n\n\n
    yarn add react-toastify
    <\/code><\/pre>\n\n\n\n
    Additionally, you will need to import the CSS file provided by React Toastify in your main application file (e.g., index.js<\/code> or App.js<\/code>):<\/p>\n\n\n\n
    import 'react-toastify\/dist\/ReactToastify.css';
    <\/code><\/pre>\n\n\n\n
    Basic Usage<\/h3>\n\n\n\n
    To use React Toastify, you need to import the library and the ToastContainer<\/code> component into your React component:<\/p>\n\n\n\n
    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;
    <\/code><\/pre>\n\n\n\n
    In the code above, we define a function notify()<\/code> that triggers a toast notification with the message “Hello, this is a toast notification!” when the button is clicked. The ToastContainer<\/code> component is included in the app to manage the display of toast notifications.<\/p>\n\n\n\n
    Customizing Toast Notifications<\/strong><\/p>\n\n\n\n
    React Toastify provides a variety of options to customize the appearance and behavior of toast notifications. Here are some examples:<\/p>\n\n\n\n
      \n
    1. Positioning<\/strong>: You can specify the position of the toast notification using the position<\/code> prop in the ToastContainer<\/code>:<\/li>\n<\/ol>\n\n\n\n
      <ToastContainer position=\"top-right\" \/>
      <\/code><\/pre>\n\n\n\n
      Possible values include:<\/strong><\/p>\n\n\n\n