React-analogue-clock NPM

React Analogue Clock

A customizable analogue clock built with styled-components in React

Demo

Installation

$ yarn add styled-components react-analogue-clock

$ npm install --save styled-components react-analogue-clock

Usage

// code away!

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} />

Test it out with Storybook

$ yarn storybook

Props

baseColor: [color]
- Background color of the clock face.
borderColor: [color]
- Color of the border.
borderWidth: [integer]
- Width of the border. 0 will hide the border.
centerColor: [color]
- Color of the center dot.
handColors: [object]
- Color of each hand.
- hour: [color]
  - Color ogf the hour hand.
- 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]
- Toggle the hour numbers.
size: [integer]
- Size of the clock face in pixels.

color type defined by extra-prop-types

Contributing

To get started...

Step 1

Option 1
- 🍴 Fork this repo!
Option 2
- 👯 Clone this repo to your local machine using https://github.com/brendon1555/react-analogue-clock.git