ReactJS Blueprint Toast Component - GeeksforGeeks

08 Apr, 2022
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications.
Toast Component provides a way for users to the user to show an ephemeral message as an overlay. We can use the following approach in ReactJS to use the ReactJS Blueprint Toast Component.
Toast Props:
action: It is an action that is rendered as a minimal AnchorButton.
className: It is used to denote a space-delimited list of class names to pass along to a child element.
icon: It is used to denote the name of an icon or an icon element to render before the message.
intent: It is used to denote the visual intent color to apply to the element.
message: It is used to denote the message to display in the body of the toast.
onDismiss: It is a callback function that is triggered when the toast is dismissed, either by the user or by the timeout.
timeout: It is used to denote the milliseconds to wait before automatically dismissing toast.
Toaster Props:
autoFocus: It is used to indicate whether a toast should acquire application focus when it first opens or not.
canEscapeKeyClear: It is used to indicate whether pressing the ESC key should clear all active toasts or not.
className: It is used to denote a space-delimited list of class names to pass along to a child element.
maxToasts: It is used to denote the maximum number of active toasts that can be displayed at once.
position: It is used to denote the position of the Toaster within its container.
usePortal: It is used to indicate whether the toaster should be rendered into a new element attached to document.body or not.
 
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, 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 @blueprintjs/core
npm install @blueprintjs/core
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Appp.js
import React from 'react'import '@blueprintjs/core/lib/css/blueprint.css';import { Toast } from "@blueprintjs/core";  function App() {    return (        <div style={{            display: 'block', width: 400, padding: 30        }}>            <h4>ReactJS Blueprint Toast Component</h4>            <Toast message='Sample Toast Message' />        </div >    );}  export default App;
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:
Reference: https://blueprintjs.com/docs/#core/components/toast
Blueprint-Core
Blueprint-Overlays
React-Blueprint
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components