React.js Blueprint Panel stack (v2) Component

BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications that run in a modern web browser.

PanelStack2 hook offered by BlueprintJS: PanelStack2 gives the user a stack of panels to display on the screen. Each panel has a back button to go to the previous panel, and there is an optional initialPanel that would always remain on the screen when the panel stack is empty.

PanelStack2 props:

• className: It denotes the list of class names to pass to the child components
• initialPanel: It denotes the initial panel that displays when the stack is empty
• onClose: It denotes the callback function that is invoked when a panel is closed
• onOpen: It denotes 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 denotes the list of all the panels.

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

Project Structure:  It will look like the following.

Example 1: In this example, we will try to create a simple application that displays stacks on the screen, with the panel number present in their headers.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

App.js

import { useCallback, useState } from "react";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button, H5, 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">
            <Button onClick={openNewPanel}
                text="Open panel type 2" />
        </div>
    );
};
const Panel2 = props => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel3,
            title: `Panel 3`,
        });
    };
    return (
        <div className="docs-panel-stack-contents-example">
            <h5>Parent counter was {props.counter}</h5>
            <Button onClick={openNewPanel}
                text="Open panel type 3" />
        </div>
    );
};
const Panel3 = props => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel1,
            title: `Panel 1`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <Button onClick={openNewPanel}
                text="Open panel type 1" />
        </div>
    );
};
const initialPanel = {
    props: {
        panelNumber: 1,
    },
    renderPanel: Panel1,
    title: "Panel 1",
};
export default function App() {
    const [activePanelOnly, setActivePanelOnly] =
        useState(false);
    const [showHeader, setShowHeader] =
        useState(true);
    const [currentPanelStack, setCurrentPanelStack] =
        useState([initialPanel]);

    const addToPanelStack = useCallback(
        (newPanel) => setCurrentPanelStack(stack =>
            [...stack, newPanel]),
        [],
    );
    const removeFromPanelStack = useCallback(() =>
        setCurrentPanelStack(stack =>
        stack.slice(0, -1)), []);
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React blueprint PanelStack2 API</strong>
                <br />
                <br />
            </div>
            <div className="container" style={{ height: '240px',
                width: '300px', margin: 'auto' }}>
                <PanelStack2
                    style={{ height: '300px' }}
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    showPanelHeader={showHeader}
                    stack={currentPanelStack}
                />
            </div>
        </div>
    );
}

Also, include some CSS code for the styling of the application. 

App.css

.container > div {
  width: 240px;
  height: 300px;
}

.container > div button {
  margin: 50px auto;
  width: 100%;
}

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, let’s give the stacks an initialPanel so that we have a UI whenever the panel stack is empty. Change your App.js like the one below.

App.js

import { useCallback, useState } from "react";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button, H5, 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">
            <Button onClick={openNewPanel}
                text="Open panel type 2" />
        </div>
    );
};
const Panel2 = props => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel3,
            title: `Panel 3`,
        });
    };
    return (
        <div className="docs-panel-stack-contents-example">
            <H5>Parent counter was {props.counter}</H5>
            <Button onClick={openNewPanel}
                text="Open panel type 3" />
        </div>
    );
};
const Panel3 = props => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel1,
            title: `Panel 1`,
        });
    };

    return (
        <div className="docs-panel-stack-contents-example">
            <Button onClick={openNewPanel}
                text="Open panel type 1" />
        </div>
    );
};
const initialPanel = {
    props: {
        panelNumber: 1,
    },
    renderPanel: Panel1,
    title: "Panel 1",
};
export default 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
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React blueprint PanelStack2 API</strong>
                <br />
                <br />
            </div>
            <div className="container" style={{
                height: '240px',
                width: '300px', margin: 'auto'
            }}>
                <PanelStack2
                    style={{ height: '300px' }}
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    showPanelHeader={showHeader}
                    initialPanel={initialPanel}
                />
            </div>
        </div>
    );
}

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

npm start

Output:

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