react js

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

Share
Published by
Kene Samuel
Tags: programming

Recent Posts

How to Dynamically Create, Update, and Delete HTML Elements

In modern web development, dynamically manipulating HTML elements is essential for creating interactive and responsive…

4 days ago

Why parseInt(’09’) Returns 0

If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…

7 days ago

Event Bubbling and Capturing: Why Your Click Listener Fires Twice (And How to Fix It)

If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…

2 weeks ago

Practical Array Methods for Everyday Coding

Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…

2 weeks ago

What the Heck Is the Event Loop? (Explained With Pizza Shop Analogies)

If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…

3 weeks ago

Why [] === [] Returns false in JavaScript (And How to Properly Compare Arrays & Objects)

JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…

3 weeks ago