0.0.7 • Published 6 years ago
react-circle-clock v0.0.7
react-circle-clock
React circle clock component
Installation
$ npm install react-circle-clock --save
DEMO
Displays 2 circle SVGs with customizable radius and stroke. One circle is in the background and one circle keeps animating by time - ticks in each second.
The clock can overlap, it won't start from the begining, but continue ticking by inverting the colors.
Usage
import React from 'react';
import CircleClock from 'react-circle-clock';
class Dashboard extends React.Component{
render() {
return (
<div>
<CircleClock />
</div>
)
}
}
Components
CircleClock
Props
Name | Type | Default | Description | |
---|---|---|---|---|
radius | number | 65 | ||
size | number | 150 | ||
primaryColor | string | '#00ADB5' | ||
secondaryColor | string | '#F4AB63' | ||
customFontSize | string | '24px' | ||
stroke | string | '10' | ||
strokeBack | string | '10' | ||
strokeFront | string | '10' |
License
This software is released under the MIT License.