ReactBootstrap Toasts Component (original) (raw)

React-Bootstrap Toasts Component

Last Updated : 09 Oct, 2024

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:

Notification Just now This is a simple toast message.

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

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 therequiredmodule using the following command:

npm install react-bootstrap npm install bootstrap

**Project Structure:

It will look like the following.

Project Structure

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.

JavaScript `

// 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 }}>

React-Bootstrap Toast Component

<Toast.Header> Sample Image

GeeksforGeeks Last Seen: 1 hour ago </Toast.Header> <Toast.Body>Greetings from GeeksforGeeks</Toast.Body> ); }

**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:

ReactBootstrap Toasts Component (original) (raw)