Custom Progress Bar in React Js

• To create a custom progress bar component in React with dynamic styling using CSS variables, you can follow the steps below. This approach involves setting CSS variables directly on the component's style attribute, allowing you to modify these variables later, which will be reflected in the progress bar's appearance.

Step 1: Set Up Your React Component

• First, create a new React component named `ProgressBar.js`. In this component, you will accept `progress` (to indicate the progress percentage) and `styleVars` (an object containing CSS variable values) as props.

  import React from 'react';

  import './ProgressBar.css';

  const ProgressBar = ({ progress, styleVars }) => {

    const progressBarStyle = {

      ...styleVars,

      width: `${progress}%`,

    };

    return (

      <div className="progress-bar-container" style={{ '--progress-bar-height': '20px', ...styleVars }}>

        <div className="progress-bar" style={progressBarStyle}></div>

      </div>

    );

  };

  export default ProgressBar;

Step 2: Style Your Component with CSS

• Next, you need to define some basic styles for your progress bar. You can do this in a CSS file associated with your component. Here's an example you can include in `ProgressBar.css`:

    .progress-bar-container {

        width: 100%;

        background-color: #eee;

        border-radius: 8px;

        overflow: hidden;

        height: var(--progress-bar-height, 20px);

    }

    .progress-bar {

        height: 100%;

        background-color: var(--progress-bar-color, #4caf50);

        transition: width 0.4s ease;

        border-radius: 8px 0 0 8px;

    }

• Make sure to import this CSS file into your `ProgressBar.js` component:

Step 3: Use Your Component

• Now, you can use your `ProgressBar` component within your application and dynamically change its style by passing a `styleVars` prop. Here's an example of how to use it in an `App.js` component:

  import React, { useState } from 'react';

  import ProgressBar from './ProgressBar';

  const App = () => {

    const [progress, setProgress] = useState(50);

    const styleVars = {

      '--progress-bar-color': '#ff4500',

      '--progress-bar-height': '30px',

    };

    // Function to simulate progress

    const increaseProgress = () => {

      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));

    };

    return (

      <div>

        <ProgressBar progress={progress} styleVars={styleVars} />

        <button onClick={increaseProgress}>Increase Progress</button>

      </div>

    );

  };

  export default App;

Explanation

• CSS Variables: In this setup, the `styleVars` prop allows you to pass CSS variable values dynamically to your `ProgressBar` component. You can define any number of CSS variables within this prop to control various aspects of the progress bar's styling, such as its color or height.

• Dynamic Styles: The progress bar's width is controlled by the `progress` prop, and its appearance (color, height, etc.) can be dynamically adjusted via the `styleVars` prop containing CSS variable values.

• This approach offers a flexible way to create and manipulate a progress bar's appearance in your React applications.