A simplified version of a regular progress bar that proceeds to the next point on click and goes back on click too.
To use, first clone this repo or download the zip then open the folder in your code editor (and of course run npm install and npm start to kick start the App).
In the App Component, you will see the Progressbar Component with the "steps" prop that has an array of objects with "label" and "content" keys. You only need to change the values assigned to "label" and "content" to anything you want and the App will change accordingly (don't change "label" and "content" keys, only change the values assigned to them).
You can also add any amount of steps you want to the progress bar by adding more objects to the "steps" prop with "label" and "content" keys respectively and adding values you want. You can remove steps by doing the opposite. This will adjust the progress bar width accordingly and update your steps and checkpoints.
You can also make changes to the Progressbar Component itself to make it even more personal. Note that the components were written as React class components but feel free to change them into React functional components if you want.
I learned a different way of using React props to make components reusable in this project.
This project was bootstrapped with Create React App.
👤 Jedidiah Akinboyowa
-
Website: https://jeddy019.github.io/port/
-
Github: @jeddy019