React.js Blueprint Popover2 Style
Last Updated :
27 Sep, 2022
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building complex and data-dense interfaces for desktop applications.
In this article, we’ll discuss React.js Blueprint Popover2 Style. Popovers help in displaying the floating content next to the target element. The styles of Popover2 can be modified such as sizing, dark theme, and minimal style in the blueprint.
React Blueprint Style Features:
- Dark theme: The dark theme can be applied to the React component by providing the prop popoverClassName=”bp4-dark”.
- Sizing: As the size of popovers by default have a max-width but no max-height and for this, we can add custom styles to the popover container.
- Minimal Style: We can create a minimal popover just by setting minimal props as true as it removes the arrow from the popover & makes the transitions more subtle.
React.js Blueprint Popover2 Props:
- autoFocus: It indicates whether the overlay should acquire application focus when it first opens.
- backdropProps: It denotes the HTML props for the backdrop element.
- boundary: It denotes a boundary element supplied to the flip and preventOverflow modifiers.
- canEscapeKeyClose: It indicates whether pressing the ESC key should invoke onClose.
- captureDismiss: When a user clicks inside a Classes.POPOVER_DISMISS element will only close the current popover and not the outer popovers when this prop is enabled.
- children: It denotes an interactive element that will trigger the popover.
- className: It denotes a space-delimited list of class names to pass along to a child element.
- content: It denotes the content that will be displayed inside the popover.
- defaultIsOpen: It denotes the initial opened state when uncontrolled.
- disabled: It prevents the popover from appearing when true.
- enforceFocus: It indicates whether the overlay should prevent focus from leaving itself.
- fill: It indicates whether the wrapper and target should take up the full width of their container.
- hasBackdrop: It enables an invisible overlay beneath the popover that captures clicks and prevents interaction with the rest of the document until the popover is closed.
- hoverCloseDelay: It denotes the amount of time in milliseconds the popover should remain open after the user hovers off the trigger.
- hoverOpenDelay: It denotes the amount of time in milliseconds the popover should wait before opening after the user hovers over the trigger.
- inheritDarkTheme: It indicates whether a popover that uses a Portal should automatically inherit the dark theme from its parent.
- interactionKind: It denotes the kind of hover interaction that triggers the display of the popover.
- isOpen: It indicates whether the popover is visible.
- lazy: It is a portal containing the children that are created and attached to the DOM when the overlay is opened for the first time when this is set to true and usePortal is true.
- matchTargetWidth: It indicates whether the popover content should be sized to match the width of the target.
- minimal: It indicates whether to apply minimal styling to this popover.
- modifiers: It overrides Popper.js built-in modifiers.
- modifiersCustom: It denotes custom modifiers to add to the popper instance.
- onClose: It is a callback that is triggered when user interaction causes the overlay to close.
- onClosed: It denotes a lifecycle method invoked just after the CSS close transition ends but before the child has been removed from the DOM.
- onClosing: It denotes a lifecycle method invoked just before CSS close transition begins on a child.
- onInteraction: It is a callback function that is triggered in controlled mode when the popover open state would change due to user interaction.
- onOpened: It denotes a lifecycle method invoked just after the CSS open transition ends.
- onOpening: It denotes a lifecycle method invoked just after mounting the child in the DOM but just before the CSS open transition begins.
- openOnTargetFocus: It indicates whether the popover should open when its target is focused.
- placement: It denotes the placement at which the popover should appear.
- popoverClassName: It denotes a space-delimited string of class names applied to the popover element.
- popoverRef: It passes the ref supplied to the Classes.POPOVER element.
- popupKind: It denotes the kind of popup displayed by the popover.
- portalClassName: It denotes a space-delimited string of class names applied to the Portal element if usePortal is true.
- portalContainer: It denotes the container element into which the overlay renders its contents when usePortal is true.
- position: It denotes the position at which the popover should appear. Mutually exclusive with placement prop.
- positioningStrategy: It is used for the Popper.js positioning strategy.
- renderTarget: It denotes the target renderer which receives props injected by Popover2 which should be spread onto the rendered element.
- rootBoundary: It denotes a root boundary element supplied to the flip and preventOverflow modifiers.
- shouldReturnFocusOnClose: It denotes whether the application should return focus to the last active element in the document after this popover closes.
- targetTagName: It denote the HTML tag name for the target element.
- transitionDuration: It indicates how long the popover appears/disappears transition takes in milliseconds.
- usePortal: It indicates whether the popover should be rendered inside a Portal attached to portalContainer prop.
Syntax:
<Popover2
minimal={true}
content={<div className="custom">...</div>}
...
<Button
text="Click"
/>
)}
/>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Example 1: The below example demonstrates the usage of the dark theme style of popover2.
Javascript
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
function App() {
return (
<center>
<div style={{
padding: 20,
textAlign: "center",
color: "green"
}}>
<h1>GeeksforGeeks</h1>
<h2>ReactJS BluePrint Popover2 Style</h2>
</div>
<div style={{
backgroundColor: "black",
padding: 20,
height: 150,
width: 500
}}>
<Popover2
popoverClassName="bp4-dark"
placement="bottom"
content={
<div>
<h2 style={{ color: 'white' }}>
Dark theme enabled
</h2>
</div>
}
renderTarget={({ isOpen, ref,
...targetProps }) => (
<Button
{...targetProps}
elementRef={ref}
intent="primary"
text="Enable"
/>
)}
/>
</div>
</center>
);
}
export default App;
|
Output:
Example 2: The below example demonstrates the usage of the sizing of popover2.
Javascript
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import './index.css'
function App() {
return (
<center>
<div style={{
padding: 20,
textAlign: "center",
color: "green"
}}>
<h1>GeeksforGeeks</h1>
<h2>ReactJS BluePrint Popover2 Style</h2>
</div>
<div
style={{
padding: 20,
color: "white",
}}
>
<Popover2
popoverClassName="bp4-dark"
placement="bottom"
content={
<div className="custom"
style={{
backgroundColor: 'black',
padding: 10
}}>
List of Data Structures:
<ul>
<li>Array</li>
<li>Stack</li>
<li>Tree</li>
<li>Queue</li>
<li>Linked List</li>
<li>Array</li>
<li>Stack</li>
<li>Tree</li>
<li>Queue</li>
<li>Linked List</li>
<li>Array</li>
<li>Stack</li>
<li>Tree</li>
<li>Queue</li>
<li>Linked List</li>
</ul>
</div>
}
renderTarget={({ isOpen, ref,
...targetProps }) => (
<Button
{...targetProps}
elementRef={ref}
text="Enable"
/>
)}
/>
</div>
</center>
);
}
export default App;
|
CSS
.custom {
margin-top: 30px;
max-height: 100px;
overflow-y: auto;
}
|
Output:
Example 3: The below example demonstrates the usage of the minimal style of popover2.
Javascript
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<center>
<div style={{
padding: 20,
textAlign: "center",
color: "green"
}}>
<h1>GeeksforGeeks</h1>
<h2>ReactJS BluePrint Popover2 Style</h2>
</div>
<Popover2
minimal={true}
content={
<h2>Hey! Do you like GFG?</h2>
}
renderTarget={({ isOpen, ref,
...targetProps }) => (
<Button
{...targetProps}
elementRef={ref}
text="Enable"
/>
)}
/>
</center>
);
}
export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#popover2-package/popover2.style
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...