Creating a Progress Bar in React
Have you ever wanted to include a progress bar in a React project but you couldn’t find a simple resource to guide you in the right direction? Well, today is your lucky day! You won’t need to install a library, you won’t need to dissect complicated explanations — everything you need is right here. Let’s begin.
Step 1: Create a new component file and set up the appropriate imports.
You’ll want to be sure to include the react and styled-components imports as we will require them all throughout this process. Don’t forget to include the render and return method in the class component.
Step 2: Create the progress bar HTML components.
You’ll need to create two divs; an outer div and an inner div. The outer div will be the progress bar’s container and the inner div will fill up the container, bit by bit, to indicate the user’s current stage in your app. Divs can be created as consts between the import and the initial ‘class ProgressBar extends Component’ lines. This is where we make use of the styled-components import. It is important to note the use of back-ticks as we will be using a template literal to pass an expression that keeps track of the ProgressInTracker inner div. You’ll want to add some general styling to these divs so that we can see what’s going on with and without the inner div filling it up. To make things simpler, let’s focus on one div at a time.
The outer div. I have appropriately named mine Tracker. Once created and styled, you can incorporate the Tracker into the render, return section of the ProgressBar file. You’ll also want to import the ProgressBar component into your main App file in both the imports section and in the render, return section. You should now be able to see a bar on the screen.
The inner div. Another aptly named item is the ProgressInTracker div. This div will base its width (the progress meter) off of the percentage which will be passed as a prop through the main App file. The height should be 100% of the parent container and you should choose a contrasting colour from the outer div. I set the border-radius to be slightly smaller from the outer div and set up an animation on the width so that everything flows smoothly. Let’s pass the inner div into the Tracker tags that were previously set up, and set the percentage to 25 to make sure everything is working.
Step 3: Calculating the progression.
Now that the bones of the progress bar have been created, we’ll want to start sorting out how the inner div will get the instruction to start filling up. Head back into your main App file (or wherever you imported the ProgressBar component into) and set an initial state for percentage to the outer div (chances are, you want your progress bar to start at 0). Pass the state to the ProgressBar component in the render, return section.
Head back to your ProgressBar component file so that we can pass the percentage as props to the ProgressInTracker render, return section.
Step 4: Controlling the progress.
In the main App file, we’ll need to add a button to control when the progress bar starts to fill up by using the onClick function. Within the onClick function, you’ll need to set the state of percentage to be equal to the initial state + X (however much you want the progress bar to increase by each time the button is clicked — I chose 25 as I have 4 steps for the user to complete on my app). Test it out — your inner div should be increasing by your defined amount.
Step 5: Error handling.
We all know someone who can be a little trigger happy with the mouse so we want to ensure that our progress bar will never surpass the width of its container when users click the button. In the ProgressBar file, we’ll need to set up a new function that can do the math for our lovely, little creation.
Let’s pass the function to our ProgressInTracker component so that the minimum value is 0, the value is the percentage at the time of the click and the maximum value is 100.
As we near the end of this journey, I would like to point out that you can easily add a ‘Previous’ button into the mix so that the progress bar has the ability to decrease. I know, we are getting really fancy over here but should you find the need for your progress bar to head in the reverse direction, simply add another button (à la step 4), give it the same function that you gave the Next button, and change the plus sign to a minus one. EASY PEASY.
Guess what? You did it! You should now have a fully functioning progress bar. I’m proud, you should be proud, we are all so very proud. Now you can incorporate this sleek feature into any project or app to keep your user organized and well-informed.
Concept based on JR Development (https://youtu.be/1RfVTrmy4ww)
