Skip to content
Displays your roadmap progress in a timeline format. Built in ReactJS.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
images - 📝 updated readme with screenshot and example Mar 17, 2019
src
.gitignore
LICENSE
README.md - 📝 updated readme with screenshot and example Mar 17, 2019
configureTestEnv.ts - added <TimelineBar> component Mar 16, 2019
jest.config.js - added <TimelineBar> component Mar 16, 2019
mix-manifest.json - 📦 package v1.0.5 Mar 24, 2019
package-lock.json
package.json - 📦 package v1.0.5 Mar 24, 2019
requestAnimationFramePolyfill.ts - added <TimelineBar> component Mar 16, 2019
tsconfig.json - 🔧 Fixed import from dist in demo.tsx causing inifite build loop Mar 24, 2019
webpack.mix.js - use tsc command for production Mar 18, 2019
yarn.lock - <RoadmapProgress> renders multiple <Milestone> components with th… Mar 17, 2019

README.md

React Roadmap Progress

Displays your roadmap progress in a timeline format. Built in ReactJS.

Screenshot of <ReactRoadmapProgress> component

Installing

npm i react-roadmap-progress --save

Usage

Make sure the “version” property belonging to each milestone is a valid semver version number, as this library doesn’t validate them.

Example

import RoadmapProgress from ‘react-roadmap-progress’;

const milestones = [
    {
        title: 'Milestone 1',
        version: '0.0.1',
        description: 'Just getting started...',
        complete: true,
    },
    {
        title: 'Milestone 2',
        version: '1.0.0',
        description: (
            <div>
                <h2>Launch!</h2>
                <p>Woohoo!</p>
            </div>
        ),
        complete: true,
    },
];

<RoadmapProgress milestones={milestones} />
You can’t perform that action at this time.