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

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

or

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

Step 2

• HACK AWAY! 🔨🔨🔨

Step 3

• 🔃 Create a new pull request using https://github.com/brendon1555/react-analogue-clock/compare/.

Contributors

| Brendon Lees | | :-----------------------------------------------------------------------------------------------------: | | | | github.com/brendon1555 |

Support

Reach out to me at one of the following places!

• Website at brendon1555.com
• Twitter at @brendon1555

License

• MIT license
• Copyright 2020 © Brendon Lees.