Building a Reusable Progress Bar Component in React with Tailwind CSS

Introduction:

Every project needs a visually appealing way to display progress. Whether it's tracking task completion or visualizing data, a well-designed progress bar can make a significant impact. Instead of creating new ones from scratch each time, why not build a reusable, customizable component? In this article, we'll show you how to create a versatile Progress Bar component in React using Tailwind CSS. By the end, you'll have a flexible tool ready for use across different projects.

Why You Should Care:

Reusability in code is key to efficiency. Imagine you have multiple projects that need progress bars with different styles. Instead of rewriting the same component over and over, you can use a single, customizable component, allowing you to tweak styles and behaviors easily through props. This approach saves time and ensures consistent design throughout your applications.

Step-by-Step Guide: Building the Reusable Progress Bar

Step 1: Set Up the ProgressBar Component

We'll start by creating a new React component named ProgressBar. This component will accept several props, allowing you to customize the progress percentage, colors, and height.

import React from "react";

// ProgressBar component that accepts custom props
const ProgressBar = ({ completedProgress, totalProgress, barColor = "#FF6347", backgroundColor = "#F0E68C", height = "6" }) => {
    // Calculate the progress percentage based on the props
    const progressPercentage = (completedProgress / totalProgress) * 100;

    return (
        <div className={`w-full bg-[${backgroundColor}] rounded-full h-${height}`}>
            <div
                className={`bg-[${barColor}] h-${height} rounded-full`}
                style={{ width: `${progressPercentage}%` }}
            ></div>
        </div>
    );
};

export default ProgressBar;

Step 2: Understanding the Props

• completedProgress: The amount of progress completed, passed as a number.
• totalProgress: The total amount of progress possible, also passed as a number.
• barColor: The color of the progress bar itself, with a default value of #FF6347 (Tomato).
• backgroundColor: The background color of the progress bar, with a default value of #F0E68C (Khaki).
• height: The height of the progress bar, with a default value of 6 (in Tailwind CSS units).

These props provide flexibility and allow you to easily customize the component to fit different designs.

Step 3: Using the ProgressBar Component

Now that we have our component, let's see how it can be used in various scenarios:

import React from "react";
import ProgressBar from "./ProgressBar";

const App = () => {
    return (
        <div className="p-4 space-y-4">
            {/* Example 1: Using default values */}
            <ProgressBar completedProgress={50} totalProgress={100} />

            {/* Example 2: Customizing colors and height */}
            <ProgressBar
                completedProgress={30}
                totalProgress={100}
                barColor="#4682B4" // Steel Blue color
                backgroundColor="#FFD700" // Gold color
                height="8"
            />

            {/* Example 3: Customizing progress percentage */}
            <ProgressBar completedProgress={75} totalProgress={100} barColor="#32CD32" />  // Lime Green color
        </div>
    );
};

export default App;

Step 4: Integrating with Redux (Optional)

If your application uses Redux for state management, you can easily integrate this ProgressBar component by connecting it to the Redux store:

import React from "react";
import { useSelector } from "react-redux";

// Redux-connected ProgressBar component
const ProgressBar = ({ barColor = "#FF6347", backgroundColor = "#F0E68C", height = "6" }) => {
    const { completedProgress, totalProgress } = useSelector((state) => state.progress);

    // Calculate progress percentage
    const progressPercentage = (completedProgress / totalProgress) * 100;

    return (
        <div className={`w-full bg-[${backgroundColor}] rounded-full h-${height}`}>
            <div
                className={`bg-[${barColor}] h-${height} rounded-full`}
                style={{ width: `${progressPercentage}%` }}
            ></div>
        </div>
    );
};

export default ProgressBar;

Conclusion: Achieve Consistency and Efficiency with Reusable Components

Creating reusable components like this ProgressBar not only streamlines your workflow but also promotes consistency across your projects. With a few simple tweaks, you can adapt the component to match various design requirements, ensuring your applications look polished and professional. By incorporating reusable components into your toolkit, you’ll save time and enhance the scalability of your codebase. Start building your reusable components today, and experience the benefits of efficient and consistent UI development!