Just an analog clock for your React app.

Sasicrastko/REACT-ANALOG-CLOCK

ras-react-component

You can play with the clock HERE and choose its look by setting characteristics!

Add this analog clock to your project by executing npm install --save ras-react-component or yarn add ras-react-component.

The watch consists of the base, minute scale, hour scale, numbers, hands and the center dot. The bese consist of four concentric circles placed one over other. Numbers can be Roman and Arabic and they can take horizontal and radial position.

Versions >= 1.6.0 are with hooks. If you for some reason want to use this package in older React then use version 1.5.0.

An example of usage:

import React, { Component } from "react"
import AnalogClock from "ras-react-component"

const style = {
  numerals: "roman",
  showMinuteScale: true,
  showHourScale: true,
  showNumbers: true,
  radialDirectionOfNumbers: false,
  colorOfScalesAndNumbers: `black`,
  hourHandColor: `#151515`,
  minuteHandColor: `black`,
  secondHandColor: `red`,
  firstCircleColor: `white`,
  secondCircleColor: `white`,
  thirdCircleColor: `white`,
  fourthCircleColor: `black`,
  centerDotColor: `black`,
  width: 300,
  numberSize: 150,
  iana: `Europe/Dublin`,
}

class App extends Component {
  render() {
    return (
      <div>
        <AnalogClock characteristics={style} />
      </div>
    )
  }
}

export default App

Propery numerals enables usage of different numerical systems or characters and emojis.

The look of the watch can be set on many ways and some of examples are on the image bellow.

The ISC License

Rastko Sasic