react-multi-segment-progress
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

React Multi Segment Progress

Demo

"Buy Me A Coffee"

A React progress bar component that supports multiple segments with overlapping effect. Perfect for showing multiple progress states in a single bar.

Installation

npm install react-multi-segment-progress

Usage

import { MultiSegmentProgress } from "react-multi-segment-progress";

const MyComponent = () => {
  const segments = [
    { id: "completed", percentage: 30, color: "#52c41a", label: "Completed" },
    {
      id: "in-progress",
      percentage: 20,
      color: "#fa8c16",
      label: "In Progress",
    },
    { id: "pending", percentage: 50, color: "#d9d9d9", label: "Pending" },
  ];

  return (
    <MultiSegmentProgress
      segments={segments}
      height={12}
      borderRadius={6}
      backgroundColor="#f5f5f5"
      showTooltips
    />
  );
};

Props

Prop Type Default Description
segments Segment[] required Array of segments to display
height number 12 Height of the progress bar in pixels
backgroundColor string '#E4E5E6' Background color of the progress bar
showTooltips boolean true Whether to show tooltips on hover
borderRadius number 0 Border radius of the progress bar in pixels

Segment Type

interface Segment {
  id: string; // Unique identifier for the segment
  percentage: number; // Percentage of the total width (0-100)
  color: string; // Background color of the segment
  label?: string; // Optional label for tooltip
}

Features

  • 🎨 Customizable colors and dimensions
  • 🔄 Overlapping segments with smooth transitions
  • 💡 Tooltips on hover
  • 🎯 Rounded corners support
  • 📱 Responsive design

Examples

Basic Usage

const segments = [
  { id: "1", percentage: 40, color: "#52c41a", label: "Completed" },
  { id: "2", percentage: 60, color: "#d9d9d9", label: "Remaining" },
];

<MultiSegmentProgress segments={segments} />;

With Custom Styling

const segments = [
  { id: "1", percentage: 30, color: "#722ed1", label: "Phase 1" },
  { id: "2", percentage: 45, color: "#1890ff", label: "Phase 2" },
  { id: "3", percentage: 25, color: "#13c2c2", label: "Phase 3" },
];

<MultiSegmentProgress
  segments={segments}
  height={20}
  borderRadius={10}
  backgroundColor="#f0f0f0"
/>;

Browser Support

  • Chrome
  • Firefox
  • Safari
  • Edge

License

MIT © David Arozarena

Package Sidebar

Install

npm i react-multi-segment-progress

Weekly Downloads

113

Version

4.0.0

License

MIT

Unpacked Size

42.9 kB

Total Files

5

Last publish

Collaborators

  • darozarena