Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Popover2 Interactions. Popovers help in displaying the floating content next to the target element. Interactions tell how a popover should open & close in response to the interactions of users. There are 4 kinds of interactions provided by Blueprint and those are discussed below.
React.js Blueprint Popover2 InteractionKinds:
- Hover: This interaction opens when the target is hovered and closes when the cursor is no longer inside the target or popover.
- Hover_Target_Only: This interaction opens when the target is hovered and closes when the cursor is no longer inside the target.
- Click- This interaction opens when the target is clicked, or when Enter key is pressed while the target is in focus and closes when the user clicks anywhere outside the popover.
- Click_Target_Only: This interaction opens when the target is clicked, or when Enter key is pressed while the target is in focus and closes when the target is clicked.
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
interactionKind="hover || hover-target || click || click-target"
...
/>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:
Step 4: Run the project as follows:
npm start
Example 1: The below example demonstrates the usage of ‘Hover’ interaction in 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 Interactions</h2>
</div>
<div>
<Popover2
interactionKind="hover"
position="bottom"
content={
<div style={{
backgroundColor: "#F0EFEF",
padding: 20
}}>
<h3>This is Hover interaction.</h3>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps })
=> (
<Button
{...targetProps}
elementRef={ref}
text="Hover"
intent="success"
/>
)}
/>
</div>
</center>
);
} export default App;
|
Output:
Example 2: The below example demonstrates the usage of ‘Hover_Target_Only’ interaction in 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 Interactions</h2>
</div>
<div>
<Popover2
interactionKind="hover-target"
position="bottom"
content={
<div style={{
backgroundColor: "#F0EFEF",
padding: 20
}}>
<h3>
This is Hover_Target_Only interaction.
</h3>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps })
=> (
<Button
{...targetProps}
elementRef={ref}
text="Hover_Target"
intent="success"
/>
)}
/>
</div>
</center>
);
} export default App;
|
Output:
Example 3: The below example demonstrates the usage of ‘Click’ interaction in 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 Interactions</h2>
</div>
<div>
<Popover2
interactionKind="click"
position="bottom"
content={
<div style={{ backgroundColor: "#F0EFEF",
padding: 20 }}>
<h3>This is click interaction.</h3>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps })
=> (
<Button
{...targetProps}
elementRef={ref}
text="click"
intent="success"
/>
)}
/>
</div>
</center>
);
} export default App;
|
Output:
Example 4: The below example demonstrates the usage of ‘Click_Target_Only’ interaction in 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 Interactions</h2>
</div>
<div>
<Popover2
interactionKind="click-target"
position="bottom"
content={
<div style={{ backgroundColor:
"#F0EFEF", padding: 20 }}>
<h3>This is click-target interaction.</h3>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps })
=> (
<Button
{...targetProps}
elementRef={ref}
text="click-target"
intent="success"
/>
)}
/>
</div>
</center>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#popover2-package/popover2.interactions