brendon1555 / react-analogue-clock

An Analog Clock built with react and typescript

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.

react-analogue-clock's Issues

Move `transform: rotate(...)` styling to a style prop

styled-components creates a new class every second when the rotation changes.
Move this to a style prop instead.

Add tests

Add some unit tests using jest/enzyme.

Update README

Add a nice readme with relevant information.

Add Timezone setting

It could be great if it's possible to set timezone for the clock (assume cases where you want show multiple clocks in different timezones)