Package Exports
- react-circle-count-down
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-circle-count-down) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-circle-count-down
A react count-down plugin in circle shape!
Installation
NPM
npm install --save react-circle-count-downYarn
yarn add react-circle-count-downUsage
import CountDown from 'react-circle-count-down'
<CountDown isStart={true} progressTime={10}/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| progressTime (required) | number | 10 | Total time to count down |
| isStart (required) | bool | none | A bool flag to start the count-down progress,set it to true to start the count-down, you can reset the count down by set it to true |
| circleDiameter | number | 50 | The circle's diameter, controls the size of the component |
| circleColor | string | '#337fff' | The color of circle,in the picture above is blue |
| strokeWidth | number | 10 (max:100) | The width of the circle |
| timeMethod | string | 'integer',one of ['integer','decimals'] | 'integer' means the text of countdown is integer, 'decimals' means the text is float number |
| hideAfterDone | bool | false | whether to hide the circle after count-down completed |
| onCountDownDone | function | none | The callback when the count-dwon is completed |
| onCountDownStart | function | none | The callback when the count-dwon is started |
| fontStyleObj | object | {} | The style object to customize the cound-down text |