Implement Stack Data Structure using ReactJS
To implement Stack Data Structure using React JS and display it on the application. we will use the npm rooks package to create stack and its functionalities.
Prerequisites
Approach to Implement Stack in ReactJs
To implement the stack we will use a custom hook, i.e. the useStackState hook provided by the Rooks package for React. It manages the state in the form of a stack. It takes an array as an argument and returns array items containing list, listInReverse, and object with attributes push, pop, peek, and length.
Steps to create React Application
Step 1: Create a React application using the following command:
npx create-react-application demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Step 3: Install Rooks from npm.
npm i rooks
Project Structure:
The project should look like this.
The updated dependencies in package.json will look like:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"rooks": "^7.14.1",
"web-vitals": "^2.1.4"
}
}
Example: The below example will illustrate the Data structure stack implementation in the React JS.
Javascript
// Filename - App.js import React, { useRef } from "react" ; import { useStackState } from "rooks" ; export default function App() { const numberToPushRef = useRef(3); const [ list, { push, pop, peek, length }, listInReverse, ] = useStackState([1, 2, 3]); function addToStack() { numberToPushRef.current = numberToPushRef.current + 1; push(numberToPushRef.current); } return ( <> <h1 style={{ color: "blue" , margin: "20px" }}> Stack </h1> <div style={{ display: "block" , fontSize: "20px" , margin: "20px" , }} > {listInReverse.map((item) => { return ( <div style={{ width: "30px" , height: "30px" , background: "#a3fc9d" , borderRadius: "5px" , margin: "10px" , textAlign: "center" , }} key={item} > {item} </div> ); })} </div> <button style={{ margin: "20px" , background: "#f8e1ee" , width: "200px" , borderRadius: "5px" , padding: "10px" , }} onClick={addToStack} > Push </button> <button style={{ margin: "20px" , background: "#bbfdd8" , width: "200px" , borderRadius: "5px" , padding: "10px" , }} onClick={pop} warning > Pop </button> <p style={{ color: "#e84917" , fontSize: "20px" , margin: "20px" , }} > Top Element : {peek()} </p> <p style={{ color: "#175ce8" , fontSize: "20px" , margin: "20px" , }} > Stack Size : {length} </p> </> ); } |
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:
Contact Us