Open In App

React.js Blueprint Popover2 Backdrop

Improve
Improve
Like Article
Like
Save
Share
Report

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building complex data-dense interfaces for desktop applications.

ReactJs Blueprint Popover2 component makes the content associated with a target element appear floating on the screen. The backdrop is a transparent layer that appears on the screen and prevents any interaction with other elements on the screen. To add a backdrop to the Popover2 Component we pass the hasBackdrop prop, which takes a boolean value. It is true by default.

Syntax:

<Popover2 hasBackdrop/>

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 then install create-react-app globally by using the command npm -g create-react-app or can 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 using the following command.

cd project

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

npm install @blueprintjs/core
npm install @blueprintjs/popover2

Project Structure: It will look like this:

 

Example 1: We are importing the Popover2  Component from “@blueprintjs/popover2” and the Button Component from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

To the Popover2 Component in the content, we have created a div with some inline styling and the text “Welcome to Geeksforgeeks !”. Now to the Popover2 component, we are passing the hasBackdrop prop.

App.js




import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <div className="App">
            <h3> React Blueprint Popover2 Backdrop</h3>
  
            <div>
                <Popover2
                    hasBackdrop
                    content={
                        <div style={{
                            backgroundColor: "white",
                            padding: "30px"
                        }}>
                            <h2>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks
                                </span>!
                            </h2>
                        </div>
                    }
  
                    renderTarget={({ isOpen, ref, 
                        ...targetProps }) => (
                        <Button {...targetProps}
                            elementRef={ref} text="Click me"
                        />
                    )}
                />
            </div>
        </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 naming backdrop using react hook useState. We are creating a dropdown with some options and adding an onChange function selectHandle, that sets the backdrop. To the hasBackdrop prop, we are passing the backdrop state.

App.js




    
import { useState } from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    const [backdrop, setBackdrop] = useState(true);
    const selectHandle = (e) => {
        if (e.target.value === true) setBackdrop(true);
        else setBackdrop(false);
    };
    return (
        <div className="App">
            <h3> React Blueprint Popover2 Backdrop</h3>
            <label> hasBackdrop : </label>
  
            <select onChange={selectHandle}>
                <option value={true}>true</option>
                <option value={false}>false</option>
            </select>
  
            <div>
                <Popover2
                    hasBackdrop={backdrop}
                    content={
                        <div style={{
                            backgroundColor: "#FFEEA6",
                            padding: "10px"
                        }}>
                            <h2>Welcome to Geeksforgeeks</h2>
  
                            <p>Let's begin ...</p>
  
                        </div>
                    }
  
                    renderTarget={({ isOpen, ref, 
                    ...targetProps }) => (
                        <Button {...targetProps} elementRef={ref}
                            text="Click me !"
                        />
                    )}
                />
            </div>
        </div>
    );
}
  
export default App;


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

npm start

Output: 

 

Reference: https://blueprintjs.com/docs/#popover2-package/popover2.backdrop



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads