react-multi-segment-circle-progress v1.0.3

React Multi-Segment Progress

A flexible and reusable circular progress component with multiple segments, customizable colors, and a smooth UI. Ideal for visualizing segmented progress bars with gaps and labels inside the circle.

🚀 Installation

Install the package via npm or yarn:

npm install react-multi-segment-circle-progress

or

yarn add react-multi-segment-circle-progress

🔧 Usage

Import and use the MultiSegmentAuto component in your project:

import React from "react";
import { MultiSegmentAuto } from "react-multi-segment-circle-progress";

const App = () => {
  return (
    <MultiSegmentAuto
      size={150}
      strokeWidth={12}
      totalValue={80}
      maxValue={100}
      segmentsCount={4}
      segmentColors={["#24CCA7", "#FFCE31", "#FF5C5C", "#9999FF"]}
      gap={3}
      label={80}
      showBackgroundCircle
      backgroundCircleColor="#eee"
    />
  );
};

export default App;

🎨 Examples

1️⃣ Basic Usage

<MultiSegmentAuto
  size={120}
  totalValue={60}
  segmentsCount={3}
  segmentColors={["#FF0000", "#00FF00", "#0000FF"]}
/>

2️⃣ With Gaps & Custom Stroke Width

<MultiSegmentAuto
  size={180}
  strokeWidth={15}
  totalValue={90}
  segmentsCount={5}
  gap={5}
  segmentColors={["#FFD700", "#DC143C", "#32CD32", "#1E90FF", "#8A2BE2"]}
/>

3️⃣ With Custom Label

<MultiSegmentAuto
  size={150}
  totalValue={70}
  label={<span style={{ fontSize: "20px", fontWeight: "bold" }}>70%</span>}
/>

4️⃣ With Background Circle

<MultiSegmentAuto
  size={150}
  strokeWidth={12}
  totalValue={42}
  maxValue={100}
  showBackgroundCircle={true}
  backgroundCircleColor="#ddd"
  label={<b>42 / 100</b>}
/>

🎛️ Props

📌 Notes

• Ensure totalValue <= maxValue to avoid unexpected behavior.
• segmentColors will cycle through if there are fewer colors than segments.
• Use strokeLinecap="round" for smooth segment ends.
• The label prop accepts text or JSX elements, so you can pass icons, numbers, or custom designs.

🌎 Links

• GitHub Repository: github.com/react-multi-segment-circle-progress
• NPM Package: npmjs.com/package/react-multi-segment-circle-progress

📜 License

MIT © 2025 ehsanmolaei991