Build a Progressbar in React

Building a Progress Bar Component in React

Let's walk through how to build a simple, reusable ProgressBar component using React. The component will visually represent a progress value between 0 and 100% and will handle out-of-range values by clamping them to the nearest valid value.

Prerequisites

First, ensure you have the following set up:

Node.js: Download and install Node.js from nodejs.org.
React: Basic understanding of React components and props.
Text Editor: A code editor like Visual Studio Code.

What We're Building

The component takes two props increment and duration, which are set here to 10 and 1000 respectively.

Step 1: Set Up the Project Create a new React project:

If you don't have a React project already, you can create one using Create React App by running the following commands in your terminal:

npx create-react-app progress-bar-example cd progress-bar-example

Navigate to the source folder: Inside your project directory, go to the src folder where you'll add your ProgressBar component.

cd src

Step 2: Create the ProgressBar Component

Create a new file for the ProgressBar component

create a file named ProgressBar.js inside the src directory:

touch ProgressBar.js

Implement the ProgressBar component:

Open ProgressBar.js in your code editor and add the following code:

const MIN = 0
const MAX = 100
const MIN = 0
const MAX = 100

export default function ProgressBar({ increment = 20, duration = 1000 }) {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const intervalId = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(intervalId)
          return 100
        } else {
          return prev + increment
        }
      })
    }, duration)
    return () => clearInterval(intervalId)
  }, [])

  return (
    <div className='progress' data-label={progress}>
      <span className='value' style={{ width: `${progress}%` }}>
        {progress > 0 && `${progress}%`}
      </span>
    </div>
  )
}

Here's what each part of the code does:

• MIN and MAX constants: Define the minimum and maximum values for the progress bar (0% and 100%, respectively).

• clampedValue: Ensures the value prop is clamped between 0 and 100. If the value is less than MIN, it's set to MIN. If it's greater than MAX, it's set to MAX.

• JSX structure: The ProgressBar component returns a div with a nested div styled according to the clamped progress value.

• Aria attributes: The role and aria attributes ensure accessibility.

Step 3: Styling

Add some basic styles to your ProgressBar component to make it visually appealing. You can do this in a new ProgressBar.css file:

touch ProgressBar.css

Open ProgressBar.css and add the following CSS:

.progress {
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  height: 20px;
  width: 100%;
}

.progress-bar {
  background-color: #76c7c0;
  height: 100%;
  transition: width 0.4s ease;
}

/* -- notes
.progress: Styles the container with a light gray background and rounded corners.
.progress-bar: Styles the inner bar with a custom color and smooth
transition effect as it changes width.*/

Import the CSS into your ProgressBar component:

Modify the ProgressBar.js file to import the CSS file:

import './ProgressBar.css'

Step 4: Use the ProgressBar Component

Open App.js in the src directory, and replace the default content with code that uses your ProgressBar component:

import React, { useState } from 'react'
import ProgressBar from './ProgressBar'

import ProgressBar from './progress-bar'

export default function App() {
  return (
    <div className='wrapper'>
      <ProgressBar increment={10} duration={1000} />
    </div>
  )
}

• useState Hook: Manages the state of the progress value.
• input range slider: Allows you to dynamically update the progress value and see the progress bar adjust in real time.

Step 5: Run Your Application

Start the development server to see your progress bar in action:

npm start

Open the application: Visit http://localhost:3000 in your web browser. You should see a simple progress bar that updates its value as you move the range slider.

Conclusion

Now you have a reusable and responsive ProgressBar component in React! Feel free to customize the styles or enhance its functionality as needed.