React.js Blueprint Panel stack Component

Last Updated : 29 Sep, 2022

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.

PanelStack hook offered by BlueprintJS: PanelStack 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.

PanelStack 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, PanelStack } from "@blueprintjs/core";
import './App.css'

const Panel1 = props => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            component: 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: {},
            component: 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: {},
            component: 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,
    },
    component: 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 PanelStack API</strong>
                <br />
                <br />
            </div>
            <div className="container" style=
                {{ height: '240px', width: '300px', margin: "auto" }}>
                <PanelStack
                    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, PanelStack } from "@blueprintjs/core";
import './App.css'

const Panel1 = props => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            component: 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: {},
            component: 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: {},
            component: 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,
    },
    component: 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 PanelStack API</strong>
                <br />
                <br />
            </div>
            <div className="container" style=
                {{ height: '240px', width: '300px', margin: "auto" }}>
                <PanelStack
                    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-stack

React Introduction

dishebhbhayana

Improve

Article Tags :

React.js Blueprint Panel stack Component

Similar Reads

React Fundamentals

Components in React

React Hooks

Routing in React

Advanced React Concepts

React Projects

Thank You!

What kind of Experience do you want to share?