React.js Blueprint Popover2 Backdrop
Last Updated :
01 Aug, 2022
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
Share your thoughts in the comments
Please Login to comment...