React.js Blueprint Panel stack (v2) Component Props

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 stack Panels (v2) Component Props. 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.

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 s used to denote the initial panel that displays when the stack is empty.
• onClose: It s used to denote the callback function that is invoked when a panel is closed.
• onOpen: It s 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 s 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. app name, 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 usage of the onOpen, onClose, renderActivePanelOnly, showPanelHeader props 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 stack Panels (v2)
                    Component Props
                </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 showPanelHeader and className props 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 stack Panels (v2)
                    Component Props
                </h2>
            </div>
            <div
                className="main"
                style={{ height: "240px", width: "300px",
                    margin: "auto" }}
            >
                <PanelStack2
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    className="panel-stack"
                    showPanelHeader={showHeader}
                    initialPanel={initialPanel}
                />
            </div>
        </div>
    );
}

export default App;

App.css

CSS

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

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

.panel-stack {
    background-color: lightblue;
    font-size: 18px;
    color: blue;
}

Output:

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