ReactJS Blueprint Toast Component

Last Updated : 18 Jan, 2023

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 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
```

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.

App.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;