React.js Blueprint Panel stack (v2) Component Panels

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 Panel stack (v2)  Component Panels. The panel stack(v2) is used in managing a stack of panels and displays only the topmost panel. In a panel, each panel consists of a header containing a back button to return to the previous panel. The panel stack can be operated as a controlled or uncontrolled component.

The panels are supplied as objects in which a renderPanel and other props are used to render the panel element and the title will show in the header and back button. Also, each panel is only mounted when it is on top of the stack and is unmounted only when it is closed or when a panel opens above it.

React.js interface Panel Props:

• htmlTitle: It denotes the HTML title to be passed to the component
• props: These are the props passed to the component type when it is rendered.
• renderPanel: It denotes the renderer for this panel.
• title: It is the title to be displayed above this panel.

React.js interface PanelActions Props:

• closePanel: It is used to denote a call this method to programmatically close this panel.
• openPanel: It is used to denote a call this method to open a new panel on the top of the stack.

React.js BluePrint stack Panels (v2) Component Props:

• className: It is used to denote the list of class names to pass to the child components.
• initialPanel: It is used to denote the initial panel that displays when the stack is empty.
• onClose: It is used to denote the callback function that is invoked when a panel is closed.
• onOpen: It is used to denote the callback function that is invoked when a panel is opened.
• renderActivePanelOnly: It determines whether PanelStack would render all panels in the stack to the DOM.
• showPanelHeader: It determines whether to show the back button in the header of each panel.
• stack: It is used to denote the list of all the panels.

Syntax:

<PanelStack2
    onOpen={addToPanelStack}
    onClose={removeFromPanelStack}
    renderActivePanelOnly={activePanelOnly}
    initialPanel={initialPanel}
/>

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:

Steps to run the application: Run the project as follows.

npm start

Example 1: The below example demonstrates the basic usage of the Panel Stack v2 component.

App.js

Javascript

import React, { useCallback, useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, PanelStack2 } from "@blueprintjs/core";
import "./App.css";

const Panel1 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel2,
            title: `Panel-2`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 1.</h2>
            <Button onClick={openNewPanel}
                text="Open New Panel" />
        </div>
    );
};

const Panel2 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel3,
            title: `Panel-3`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 2.</h2>
            <Button onClick={openNewPanel}
                text="Open New Panel" />
        </div>
    );
};

const Panel3 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel1,
            title: `Panel-1`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 3.</h2>
            <Button onClick={openNewPanel}
                text="Open New Panel" />
        </div>
    );
};

const initialPanel = {
    props: {
        panelNumber: 1,
    },
    renderPanel: Panel1,
    title: "Panel 1",
};

function App() {
    const [activePanelOnly, setActivePanelOnly] =
        useState(true);
    const [showHeader, setShowHeader] = useState(true);
    const [currentPanelStack, setCurrentPanelStack] =
        useState([]);
    const addToPanelStack = useCallback(
        (newPanel) => setCurrentPanelStack((stack) =>
            [...stack, newPanel]),
        []
    );
    const removeFromPanelStack = useCallback(
        () => setCurrentPanelStack((stack) =>
            stack.slice(0, -1)),
        []
    );

    return (
        <div>
            <div style={{ textAlign: "center",
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Panel stack v2 Component Panel
                </h2>
            </div>
            <div
                className="main"
                style={{ height: "240px",
                    width: "300px", margin: "auto" }}
            >
                <PanelStack2
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    initialPanel={initialPanel}
                />
            </div>
        </div>
    );
}

export default App;

App.css

CSS

.main>div {
    width: 250px;
    height: 320px;
}

.main>div button {
    margin: 60px auto;
    width: 100%;
}

Output:

Example 2: The below example demonstrates the usage of the Panel Stack v2 component with custom styles using the className prop.

App.js

Javascript

import React, { useCallback, useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, PanelStack2 } from "@blueprintjs/core";
import "./App.css";

const Panel1 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel2,
            title: `Panel-2`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 1.</h2>
            <Button onClick={openNewPanel}
                text="Open New Panel" />
        </div>
    );
};

const Panel2 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel3,
            title: `Panel-3`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 2.</h2>
            <Button onClick={openNewPanel}
                text="Open New Panel" />
        </div>
    );
};

const Panel3 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel1,
            title: `Panel-1`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 3.</h2>
            <Button onClick={openNewPanel}
                text="Open New Panel" />
        </div>
    );
};

const initialPanel = {
    props: {
        panelNumber: 1,
    },
    renderPanel: Panel1,
    title: "Panel 1",
};

function App() {
    const [activePanelOnly, setActivePanelOnly] =
        useState(true);
    const [showHeader, setShowHeader] = useState(true);
    const [currentPanelStack, setCurrentPanelStack] = useState([]);

    const addToPanelStack = useCallback(
        (newPanel) => setCurrentPanelStack((stack) =>
            [...stack, newPanel]),
        []
    );
    const removeFromPanelStack = useCallback(
        () => setCurrentPanelStack((stack) =>
            stack.slice(0, -1)),
        []
    );

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Panel stack v2 Component Panel
                </h2>
            </div>
            <div
                className="main"
                style={{ height: "240px",
                    width: "300px", margin: "auto" }}
            >
                <PanelStack2
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    initialPanel={initialPanel}
                    className="custom-panel"
                />
            </div>
        </div>
    );
}

export default App;

App.css

CSS

.main>div {
    width: 250px;
    height: 320px;
}

.main>div button {
    margin: 60px auto;
    width: 100%;
}

.custom-panel {
    font-style: italic;
    color: green;
    font-size: larger;
}

Output:

Reference: https://blueprintjs.com/docs/#core/components/panel-stack2.panels