Miss any of our Open RFC calls?Watch the recordings here! »

react-analogue-clock

0.3.0 • Public • Published

AnalogueClock

React Analogue Clock

A customizable analogue clock built with styled-components in React

GitHub issues devDependencies peerDependencies License


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


Contributors

Brendon Lees
Brendon1555
github.com/brendon1555

Support

Reach out to me at one of the following places!


License

License

Install

npm i react-analogue-clock

DownloadsWeekly Downloads

0

Version

0.3.0

License

MIT

Unpacked Size

360 kB

Total Files

20

Last publish

Collaborators

  • avatar