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.