@e4ia/progressbar - A Customizable Progress Bar Component for React 🎮

App: E4LINK-Dashboard

A lightweight and customizable progress bar component for React applications. Perfect for showing progress in your UI, with flexible configurations and easy-to-use functionality. 🚀

📑 Table of Contents

• 📑 Table of Contents
• 🚀 Installation
• 🛠️ Usage
• 📜 API
  • ProgressBar
    • Props:
• 💡 Examples
  • Basic Example
  • Customizing the Progress Bar
• 📝 License

🚀 Installation

You can install the @e4ia/progressbar component via npm:

npm install @e4ia/progressbar

Or using yarn:

yarn add @e4ia/progressbar

🛠️ Usage

Once installed, you can use the ProgressBar component in your React project like this:

import React, { useState, useEffect } from 'react'; import { ProgressBar } from '@e4ia/progressbar';

const App = () => { const [progress, setProgress] = useState(0);

useEffect(() => { const interval = setInterval(() => { setProgress((prev) => { if (prev < 100) return prev + 10; clearInterval(interval); return prev; }); }, 1000);

return () => clearInterval(interval);

}, []);

return ( File Upload 📂 ); };

export default App;

## 📜 API

### `ProgressBar`

A customizable progress bar component that displays progress based on the `progress` prop.

#### Props:

| Name         | Type      | Default  | Description |
|--------------|-----------|----------|-------------|
| `progress`   | `number`  | `0`      | The current progress value (0 - 100). 📊 |
| `color`      | `string`  | `"blue"` | The color of the progress bar (supports any valid CSS color). 🎨 |
| `height`     | `string`  | `"20px"` | The height of the progress bar. 📏 |
| `width`      | `string`  | `"100%"` | The width of the progress bar container. 📐 |
| `background` | `string`  | `"lightgray"` | The background color of the progress bar container. 🌈 |

---

## 💡 Examples

### Basic Example


<ProgressBar progress={50} />


This will display a progress bar that is 50% full. 🔥

### Customizing the Progress Bar


<ProgressBar 
  progress={75} 
  color="green" 
  height="30px" 
  background="lightgray" 
/>


This will display a progress bar that is 75% full, with a green color, a height of 30px, and a light gray background. 🎯



## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 🖖