React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. React.js Blueprint Popover2 component makes the content associated with a target element appear floating on the screen.
The placement concept of the Popover2 component defines the position of the Popover2. It takes these values – ‘bottom-start’, ‘bottom-end’, ‘bottom’, ‘top-start’, ‘top-end’, ‘top’, ‘left-start’, ‘left-end’, ‘left’, ‘right-start’, ‘right-end’, ‘right’, ‘auto’, ‘auto-start’ and ‘auto-end’.
Syntax:
<Popover2 placement=""/>
Prerequisite:
- Introduction and Installation ReactJS
- ReactJS Blueprint Popover2 Component
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 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 @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 different values to the placement 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 Placement</h3>
<div style={{ textAlign: "center" }}>
<Popover2
placement= "top-start"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "top-start" />
)}
/>
<Popover2
placement= "top"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "top" />
)}
/>
<Popover2
placement= "top-end"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "top-end" />
)}
/>
<br />
<Popover2
placement= "right-start"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "right-start" />
)}
/>
<Popover2
placement= "right"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "right" />
)}
/>
<Popover2
placement= "right-end"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "right-end" />
)}
/>
<br />
<Popover2
placement= "left-start"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "left-start" />
)}
/>
<Popover2
placement= "left"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "left" />
)}
/>
<Popover2
placement= "left-end"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "left-end" />
)}
/>
<br />
<Popover2
placement= "bottom-start"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "bottom-start" />
)}
/>
<Popover2
placement= "bottom"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "bottom" />
)}
/>
<Popover2
placement= "bottom-end"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps} elementRef={ref}
text= "bottom-end" />
)}
/>
</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 passing values like ‘auto-start’, ‘auto’ and ‘auto-end’ to the placement 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 Placement</h3>
<div style={{ textAlign: "center" }}>
<Popover2
placement= "auto-end"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "auto-end" />
)}
/>
<Popover2
placement= "auto"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "auto" />
)}
/>
<Popover2
placement= "auto-start"
content={
<div style={{
backgroundColor: "white" ,
padding: "30px" }}>
<h4>
Welcome to{ " " }
<span style={{ color: "green" }}>
Geeksforgeeks
</span>!
</h4>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button {...targetProps}
elementRef={ref} text= "auto-start" />
)}
/>
</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.placement