Package Exports
- react-dashed-progress
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dashed-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-dashed-progress
A React.js component to draw circular progress bar
Examples
- To check out live examples visit https://dmitrymorozoff.github.io/react-dashed-progress/
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