React Tutorials

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the React js application. To build the desktop notification, we will use the bootstrap package not only but also use React bootstrap module.

Toast notification gives your users easy and simple feedback or a message regarding an operation within a small pop-up.

The good thing about toast notification is that it doesn’t deliberately grab your users’ attention, unlike modal popover.

A toast notification is known by many names: passive pop-up, snack bar, desktop notification, and toast notification bubble. Ideally, a toast notification disappears from users’ windows after a short time period.

React Js Bootstrap Toast Notification Example

  • Step 1: Generate React App
  • Step 2: Install Bootstrap Module
  • Step 3: Set Up New Component File
  • Step 4: Create Toast Component
  • Step 5: Update App.js File
  • Step 6: Serve React Application

Generate React App

To form the new project, add the given command on the terminal’s command prompt and then run the command.

npx create-react-app react-desktop

Next, step into the application’s root.

cd react-desktop

Install Bootstrap Module

On the command prompt, copy and place the following command, invoke the command to install the Bootstrap module.

npm install react-bootstrap bootstrap

Set Up New Component File

Creating a simple functional component is quick and easy, make sure to make /components folder.

Again, create the /ToastComponent.js file, import the bootstrap library’s CSS as shown in the following code example.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'


export default function ToastComponent() {
  return (
     
  )
}

Create Toast Component

Open the ToastComponent.js file. In this functional component, we will manage the toast notification state using the useState hook.

In the component, define the useState set the initial state to false so that the toast notification stays hidden at the beginning.

Bootstrap offers a toast tag; add it inside the component. Add the onClose event, autohide, and delay properties in the toast component tag.

import React, { useState } from 'react'
import { Toast, Button } from 'react-bootstrap'

export default function ToastComponent() {
  const [showToast, setToast] = useState(false)

  return (
    <div>
      <h2 className="mb-4">
        React JS Desktop Notification with Bootstrap Example
      </h2>

      <Toast
        onClose={() => setToast(false)}
        autohide
        show={showToast}
        delay={2200}
      >
        <Toast.Header>
          <strong className="mr-auto">React Toast</strong>
          <small>50 mins ago</small>
        </Toast.Header>
        <Toast.Body>Lorem ipsum dolor sit adipiscing elit.</Toast.Body>
      </Toast>

      <Button onClick={() => setToast(true)}>Show Toast</Button>
    </div>
  )
}

Update App.js File

In the next step, we need to update the ToastComponent component inside the App.js file.

Hence, open the app js file, import the component that we want to inject. After that define the component tag inside the react App() function.

import React from 'react'

import ToastComponent from './components/ToastComponent'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

function App() {
  return (
    <div className="container mt-3">
      <ToastComponent />
    </div>
  )
}

export default App

Serve React Application

You can now view the toast by starting the react app using the given command.

npm start

After executing the above command app can be viewed on the browser, then open the browser on provided app url:

http://localhost:3000

Conclusion

In this article we showed you how to create desktop or toast notification in React application using the react bootstrap module.

In this step by step guide, we explored every bit of information which was needed to implement toast messages in React app.

We covered the concepts from very basic, we used react functional component to build the toast functionality.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago