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:

1. Clone the repository:

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

2. Install dependencies:

   cd react-progress-tracker
   npm install

3. Run tests:

   npm test

4. 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💙