react-milestonebar v1.0.0

Install

yarn add react-milestonebar

Uses

<ProgressBar percentage={50}>
  {({ containerStyles, completedBarStyles, getMilestones }) => {
    return (
      <div style={{ ...containerStyles, backgroundColor: "lightgrey" }}>
        <div style={completedBarStyles} />
        {getMilestones()}
      </div>
    );
  }}
</ProgressBar>

With milestones

<ProgressBar percentage={50} milestones={3}>
  {({ containerStyles, completedBarStyles, getMilestones }) => {
    return (
      <div style={{ ...containerStyles, backgroundColor: "lightgrey" }}>
        <div style={completedBarStyles} />
        {getMilestones()}
      </div>
    );
  }}
</ProgressBar>

With custom milestone colour

<ProgressBar percentage={50} milestones={3} color="green">
  {({ containerStyles, completedBarStyles, getMilestones }) => {
    return (
      <div style={{ ...containerStyles, backgroundColor: "lightgrey" }}>
        <div style={completedBarStyles} />
        {getMilestones()}
      </div>
    );
  }}
</ProgressBar>

With custom milestone elements

<ProgressBar 
  percentage={50} 
  milestones={3} 
  Milestone={<div>Not completed</div>}
  CompletedMilestone={<div>Completed!</div>}>
  {({ containerStyles, completedBarStyles, getMilestones }) => {
    return (
      <div style={{ ...containerStyles, backgroundColor: "lightgrey" }}>
        <div style={completedBarStyles} />
        {getMilestones()}
      </div>
    );
  }}
</ProgressBar>