React Suite Notification Closeable

Last Updated : 21 Feb, 2023

React suite is a library of React components with a sensible UI design and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

The React Suite Notification component shows notification messages on the screen

closable: It is a boolean value. It denotes whether to display or not to display the remove button. By default is true.

Syntax:

<Notification closable={}> ... </Notification>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally by using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

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

cd project

Step 3: now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Example 1: In this example, we are importing the Notification Component from “rsuite”, and applying the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

We are adding two Notification Components, within the component we are adding a div with some text and some inline styling, the first Component we kept as it is, and the next one we passed the closable prop.

App.js: Write the below code in the app.js file:

App.js

import { Notification } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
function App() { 
  return ( 
    <div className="App"> 
      <h4>React Suite <Notification> Prop</h4> 
      <Notification> 
        <div style={{ backgroundColor: "#D6FFA2", padding: 40 }}> 
          <h6>Welcome to Geeksforgeeks !</h6> 
          <p>( default )</p> 
        </div> 
      </Notification> 
      <Notification closable> 
        <div style={{ backgroundColor: "#EEBEFF", padding: 40 }}> 
          <h6>Welcome to Geeksforgeeks !</h6> 
          <p>( Added closable )</p> 
        </div> 
      </Notification> 
    </div> 
  ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: We are creating a state name close initialized as false using react hook useState, we are importing useState from ‘react’. To the Notification component, to the closable prop we are passing close state.

We are adding a button in our div that calls the handleClick onClick function that changes the state of the close.

App.js: Write the below code in the app.js file:

App.js

import { useState } from "react"; 
import { Notification } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
function App() { 
  const [close, SetClose] = useState(false); 
  
  const handleClick = () => { 
    SetClose(!close); 
  }; 
  return ( 
    <div className="App"> 
      <h4>React Suite <Notification> Prop</h4> 
      <Notification header="Hey Geek!" closable={close}> 
        <div style={{ backgroundColor: "#D6FFA2", padding: 40 }}> 
          <h4>closable = {"" + close}</h4> 
          set it to 
          <button 
            onClick={handleClick} 
            style={{ boxShadow: "-2px 3px 5px 0px", 
            marginLeft: 10 }} 
          > 
            {"" + !close} 
          </button> 
        </div> 
      </Notification> 
    </div> 
  ); 
} 
  
export default App;