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.