React Js Bootstrap Toast Notification Component Tutorial

React Toast notification tutorial. Toast notification are meant to display crucial information or messages to web users particularly on web or mobile screens.

Toast notifications are known by some other names such as pop-up, notification bubble, passive pop-up.

The main idea of toast notification comes from Android material design.

Today, in this quick tutorial we will show you the most easiest way to create toast notification component in React application.

To build the Toast notification in React we will use Bootstrap and React Bootstrap packages altogether.

In this toast notification example, we will walk you through every step that points towards enhancing the user experience of your React app.

How to Create Toast Notification in React with Bootstrap

  • Step 1: Create React App
  • Step 2: Add React Bootstrap Library
  • Step 3: Make Component File
  • Step 4: Build Toast Notification Component
  • Step 5: Add Component in App Js
  • Step 6: View Toast Notification

Create React App

Head over to terminal, type the command for installing a new React app.

npx create-react-app react-toast

Get into the project folder throw following command.

cd react-toast

Add React Bootstrap Library

To create the expected feature install the Bootstrap packages, here is the command that allows you to add the package.

npm install react-bootstrap bootstrap

In the following step, you have to import the bootstrap css from node modules to App.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Make Component File

Now, we need to create /components directory, /BootToast.js file and add the given code inside the file.

import React from 'react'

export default function BootToast() {
  return (
    <></>
  )
}

Build Toast Notification Component

Go ahead and open the BootToast.js file, there after you have to place the following code into the file.

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

export default function BootToast() {
  const [view, initView] = useState(false)

  return (
    <div>
      <h2 className="mb-3">React JS Bootstrap Toast Notification Example</h2>

      <Toast onClose={() => initView(false)} show={view} delay={1800} autohide>
        <Toast.Header>
          <strong className="mr-auto">React Toast</strong>
          <small>55 mins ago</small>
        </Toast.Header>
        <Toast.Body>A tiny Bootstrap Toast component.</Toast.Body>
      </Toast>

      <Button onClick={() => initView(true)}>Unleash Toast</Button>
    </div>
  )
}

Add Component in App Js

Now, we have to register the BootToast component into the App.js file, please refer to the given code.

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

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

export default App

View Toast Notification

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

React Js Bootstrap Toast Notification Component Tutorial

Summary

Almost, everything has been connected properly now you are ready to display messages through a toast dialog box.

We started with installing and configuring the bootstrap package in a brand new react app.

We integrated the toast notification box in a React functional component.

In the functional component we used the useState react hook, bootstrap Toast and Button modules to show toast on button click.