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:
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.
.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.
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