React.js Blueprint Popover2 Style Minimal Style

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Popover2 Component provides a way for users to display floating content next to a target element. We can use the following approach in ReactJS to use the ReactJS Blueprint Popover2 Component.

Minimal Style in Popover 2 removes the arrow from the popover and makes the transitions more subtle. You just need to set minimal={true}

Syntax:

 <Popover2  minimal={true}  />

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

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: It will look like the following.

Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. In this example, we will set minimal={true} to remove the arrow from the Popover 2.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button, mergeRefs } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {

    return (
        <div>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>ReactJS Blueprint Popover2 Style Minimal Style</h3>
            <Popover2
                minimal={true}
                content={<h1>Popover!</h1>}
                renderTarget={({ isOpen: isPopoverOpen,
                    ref: ref1, ...popoverProps }) => (
                    <Button
                        active={isPopoverOpen}
                        {...popoverProps}
                        text="Click me to open Popover2"
                        elementRef={mergeRefs(ref1)}
                    />
                )}
            />
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we have set minimal={false}. Now an arrow will be shown along with the Popover.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button, mergeRefs } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {

    return (
        <div>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>ReactJS Blueprint Popover2 Style Minimal Style</h3>
            <Popover2
                minimal={false}
                content={<h1>Popover!</h1>}
                renderTarget={({ isOpen: isPopoverOpen,
                    ref: ref1, ...popoverProps }) => (
                    <Button
                        active={isPopoverOpen}
                        {...popoverProps}
                        text="Click me to open Popover2"
                        elementRef={mergeRefs(ref1)}
                    />
                )}
            />
        </div>
    );
}

export default App;

Output:

References: https://blueprintjs.com/docs/#popover2-package/popover2.minimal-style