React Progress Tracker

A customizable progress tracker component for React applications. This library provides an easy-to-use, flexible progress tracker that can be styled to fit your application's design.

Installation

npm install react-progress-tracker

Features

Customizable step colors
Horizontal and vertical layouts
Support for step descriptions
Easily styleable with styled-components

Usage

Here's a basic example of how to use the Progress Tracker component:

import React from 'react';
import { ProgressTracker } from 'react-progress-tracker';

const steps = [
  { label: 'Step 1', description: 'Start your journey' },
  { label: 'Step 2', description: 'Make progress' },
  { label: 'Step 3', description: 'Reach your goal' },
];

const App = () => {
  return (
    <ProgressTracker
      steps={steps}
      currentStep={1}
      direction="horizontal"
      activeColor="#2196f3"
      completedColor="#4caf50"
      defaultColor="#e0e0e0"
    />
  );
};

export default App;

Props

Prop	Type	Default	Description
steps	Array<{ label: string, description?: string }>	Required	An array of step objects
currentStep	number	Required	The index of the current active step (0-based)
direction	'horizontal' \| 'vertical'	'horizontal'	The layout direction of the progress tracker
activeColor	string	'#2196f3'	The color of the active step
completedColor	string	'#4caf50'	The color of completed steps
defaultColor	string	'#e0e0e0'	The color of future steps

Customization

You can easily customize the appearance of the Progress Tracker by adjusting the prop values. Here's an example with custom colors:

<ProgressTracker
  steps={steps}
  currentStep={2}
  direction="vertical"
  activeColor="#ff4081"
  completedColor="#7c4dff"
  defaultColor="#bdbdbd"
/>

Styling

The Progress Tracker uses styled-components, which makes it easy to override styles if needed. You can create your own styled components to wrap the ProgressTracker and customize its appearance further.

import styled from 'styled-components';
import { ProgressTracker } from 'react-progress-tracker';

const StyledProgressTracker = styled(ProgressTracker)`
  font-family: Arial, sans-serif;
  
  /* Customize step number */
  & > div > div:first-child {
    border: 2px solid #000;
  }
  
  /* Customize step label */
  & > div > div:last-child > div:first-child {
    font-weight: bold;
  }
`;

// Use StyledProgressTracker in your component

Development

If you want to contribute to this project or run it locally, follow these steps:

Clone the repository:

git clone https://github.com/yourusername/react-progress-tracker.git

Install dependencies:
```
cd react-progress-tracker
npm install
```
Run tests:
```
npm test
```
Build the library:
```
npm run build
```

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any problems or have any questions, please open an issue in the GitHub repository.

Made with ❤️ by pinks💙