How to Build Toast Component in React 18 with Bootstrap

Last Updated on March 4, 2024 by Digamber in React JS

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 --legacy-peer-deps

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.