React.js Blueprint Popover2 Controlled mode

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 Controlled mode. Popovers help in displaying the floating content next to the target element. In the controlled mode, we can modify the behavior of popover which can be done by using the isOpen property.

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.
• opened: 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
    isOpen={...}
    ...
/>

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
npm install @blueprintjs/popover2

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of controlled mode popover. 

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";

class App extends React.Component<{}, { isOpen: boolean }> {
    state = { isOpen: true };

    render() {
        return (
            <center>
                <div style={{ textAlign: "center",
                    color: "green" }}>
                    <h1>GeeksforGeeks</h1>
                    <h2>
                        ReactJS BluePrint Popover2 Controlled Mode
                    </h2>
                </div>
                <Popover2
                    content={
                        <div style={{ backgroundColor: "#F0EFEF",
                            padding: 20 }}>
                            <h2>GeeksforGeeks</h2>
                            <p>Popover2</p>
                        </div>
                    }
                    interactionKind="click"
                    isOpen={this.state.isOpen}
                    placement="right"
                >
                    <Button text="Click" intent="success" />
                </Popover2>
            </center>
        );
    }

}

export default App;

Output:

Note: In the above output, the popover is opened by default as isOpen property is true and the popover cannot be reopened after closing as onInteraction property is not used to handle the interactions. 

Example 2: The below example demonstrates the usage of controlled mode along with handlingInteraction (whether to open the popover on click or not and the controlled popover will remain closed even if isOpen={true}) in a popover. 

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";

class App extends React.Component<{}, { isOpen: boolean }> {
    state = { isOpen: true };

    render() {
        return (
            <center>
                <div style={{ textAlign: "center",
                    color: "green" }}>
                    <h1>GeeksforGeeks</h1>
                    <h2>
                        ReactJS BluePrint Popover2 Controlled Mode
                    </h2>
                </div>
                <Popover2
                    content={
                        <div style={{ backgroundColor: "#F0EFEF",
                            padding: 20 }}>
                            <h2>GeeksforGeeks</h2>
                            <p>Popover2</p>
                        </div>
                    }
                    interactionKind="click"
                    isOpen={this.state.isOpen}
                    onInteraction={(state) =>
                        this.handleInteraction(state)}
                    placement="right"
                >
                    <Button text="Click" intent="success" />
                </Popover2>
            </center>
        );
    }

    handleInteraction(nextOpenState: boolean) {
        this.setState({ isOpen: nextOpenState });
    }
}

export default App;

Output:

Note: In the above output, the popover is opened by default as isOpen property is true and the popover may be reopened after closing. 

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