
React Analogue Clock
A customizable analogue clock built with styled-components in React

Demo
Online demo is available
Installation
$ yarn add styled-components react-analogue-clock
or
$ npm install --save styled-components react-analogue-clock
Usage
import AnalogueClock from 'react-analogue-clock';
const clockOptions = {
baseColor: '#ffffff',
borderColor: '#000000',
borderWidth: 5,
centerColor: '#000000',
handColors: {
hour: '#000000',
minute: '#000000',
second: '#000000',
},
notchColor: '#000000',
numbersColor: '#000000',
showNumbers: true,
size: 300
}
<AnalogueClock {...clockOptions} />
or
Test it out with Storybook
$ yarn storybook
Props
- baseColor:
[color]
- Background color of the clock face.
- borderColor:
[color]
- borderWidth:
[integer]
- Width of the border. 0 will hide the border.
- centerColor:
[color]
- handColors:
[object]
- Color of each hand.
- hour:
[color]
- minute:
[color]
- Color of the minute hand.
- second:
[color]
- Color of the second hand.
- notchColor:
[color]
- Color of the minute notches.
- numberColor:
[color]
- Color of the hour numbers. (if enabled)
- showNumbers:
[boolean]
- size:
[integer]
- Size of the clock face in pixels.
color
type defined by extra-prop-types
Contributing
To get started...
Step 1
-
Option 1
-
Option 2
- 👯 Clone this repo to your local machine using
https://github.com/brendon1555/react-analogue-clock.git
Step 2
Step 3
Contributors
Support
Reach out to me at one of the following places!
License
