React.js Blueprint Button group Component Usage with popovers

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 Button group Component Usage with popovers. A button group is used to arrange multiple buttons in a horizontal or vertical group. The popovers enables button group to make all buttons expand equally to fill the available space.

Syntax:

<Popover
    content={ }
    renderTarget={
        <ButtonGroup>
            <Button>...</Button>
            <Button>...</Button>
        </ButtonGroup>
    }
/>

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 basic usage of the Button Group with the Popover component.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, ButtonGroup } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Button group Component
                    Usage with popovers
                </h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Popover2
                    interactionKind="click"
                    position="bottom"
                    content={
                        <div style={{ backgroundColor: 'lightgreen',
                            padding: 20 }}>
                            <p>GeeksforGeeks</p>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <ButtonGroup>
                            <Button
                                {...targetProps}
                                elementRef={ref}
                                text="Click"
                                icon="add"
                            />
                            <Button
                                {...targetProps}
                                elementRef={ref}
                                text="Download"
                                icon="download"
                            />
                        </ButtonGroup>
                    )}
                />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: The below example demonstrates the basic usage of the Button Group with the Popover with the help of fill and vertical props of the component.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, ButtonGroup } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Button group Component
                    Usage with popovers
                </h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Popover2
                    interactionKind="click"
                    position="bottom"
                    content={
                        <div style={{ backgroundColor: 'lightgreen',
                            padding: 20 }}>
                            <p>GeeksforGeeks</p>
                        </div>
                    }
                    renderTarget={({ isOpen, ref,
                        ...targetProps }) => (
                        <ButtonGroup vertical fill>
                            <Button
                                {...targetProps}
                                elementRef={ref}
                                text="Click"
                                icon="add"
                            />
                            <Button
                                {...targetProps}
                                elementRef={ref}
                                text="Download"
                                icon="download"
                            />
                        </ButtonGroup>
                    )}
                />
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/components/button-group.usage-with-popovers