React-Bootstrap Toasts Component

React-Bootstrap Toasts Component is a lightweight and flexible alert component for providing feedback messages. It is used to display the non blocking notifications like confirmation, alerts, errors, and updates. It is a type of notification that is designed to provide a way to mimic push notifications from desktop OS or mobile.

Syntax:

<Toast show={show} onClose={toggleShow} delay={3000} autohide>
    <Toast.Header>
        <strong className="me-auto">Notification</strong>
        <small>Just now</small>
    </Toast.Header>
    <Toast.Body>This is a simple toast message.</Toast.Body>
</Toast>

The syntax mainly contains 3 components which are Toast, Toast Header, and Toast Body

Toast Component:

The Toast component is the main container that wraps the header and body of the toast notification. It controls the visibility, position, and styling of the toast.

Toasts Props:

• animation: It is used to apply the fade animation to our toast
• autohide: It is used to auto-hide the toast.
• delay: It is used to delay the hiding of toast.
• onClose: It is a callback function that is triggered on the click of close button.
• show: It is used to show the modal when it is set to true,
• transition: It is used to display the series of labels, buttons, etc on a single horizontal row.
• bsPrefix: It is an escape hatch for working with strongly customized Bootstrap CSS

Toast Header:

The Toast.Header component represents the top section of the toast and typically contains the title, an optional close button, and other elements like icons or timestamps.

Toast Header Props:

• closeButton: It is used to specify a close button for the component.
• closeLabel: For the close button, it is used to provide an accessible label.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Toast Body:

The Toast.Body component represents the main content area of the toast where you place the actual notification message or description.

Toast Body Props:

• as: It can be used as a custom element type for this component.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Creating React Application And Installing Module

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap 
npm install bootstrap

Project Structure:

It will look like the following.

The updated dependencies in the package.json file are:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.3",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.5",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: This example demonstrates a simple React-Bootstrap Toast component displaying a notification with a header image, title, timestamp, and body message.

// Filename - App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
    return (
        <div style={{ display: "block", width: 700, padding: 30 }}>
            <h4>React-Bootstrap Toast Component</h4>
            <Toast>
                <Toast.Header>
                    <img
                        alt="Sample Image"
                        width="20px"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
                        className="rounded mr-2"
                    />
                    <strong className="mr-auto">GeeksforGeeks</strong>
                    <small>Last Seen: 1 hour ago</small>
                </Toast.Header>
                <Toast.Body>Greetings from GeeksforGeeks</Toast.Body>
            </Toast>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: