Skip to content

Latest commit

 

History

History
85 lines (56 loc) · 2.05 KB

README.md

File metadata and controls

85 lines (56 loc) · 2.05 KB
Raw

react-dashed-progress

A React.js component to draw circular progress bar

Examples

Getting started

Install react-dashed-progress using npm.

npm install --save react-dashed-progress

You can also test the components locally by cloning this repo and doing the following steps:

NPM-scripts

Install dependencies from package.json:

npm install

Runs the app in the development mode.
Open http://localhost:1234 to view it in the browser.

npm run dev

Run linter

npm run lint

Start tests followed by jest

npm run test

Usage

import React from "react";
import ReactDOM from "react-dom";
import { DashedProgress } from "react-dashed-progress";

export class App extends React.Component {
    render() {
        return (
            <DashedProgress value={5} />
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

Props

Props Type Default
size Number 160
barWidth Number 18
countBars Number 30
trailThickness Number 3
strokeThickness Number 5
value Number 0
strokeLinecap "butt", "square" , "round" "round"
trailColor String #354A5E
strokeColor String #41B883
showTooltip Boolean true
tooltipSize Number 32
tooltipColor String #354A5E

Todo

  • Animation
  • Accessibility

Contributing

  • For bugs and feature requests, please create an issue
  • Lint and test your code
  • Pull requests and ⭐ stars are always welcome

License

MIT