Check out this package at NPM
How to install:
npm install milestone-progress-bar
How to import:
import {MilestoneProgressBar} from 'milestone-progress-bar';
An example of usage:
<MilestoneProgressBar
totalMilestones={3}
progress={[
{completed: 4, total: 4},
{completed: 2, total: 2},
{completed: 2, total: 2},
]}
/>
Requires 2 props:
totalMilestones
:number
: Total number of milestones to complete the progressprogress
:list of objects
(object must havecompleted
andtotal
) :completed
must matchtotal
for a milestone to be marked complete. Do not increment value ofcompleted
of an object before marking the previous object fully complete.