ras-react-component v1.5.0

REACT ANALOG CLOCK

Just an analog clock for your React app.

Github

Sasicrastko/REACT-ANALOG-CLOCK

NPM

ras-react-component

Demo

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

Installation

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

Elements

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.

Usage

An example of usage:

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

const style = {
    showRomanNumbers: false,
    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 style={style}/>
      </div>
    );
  }
}

export default App;

Properties

Since v1.2.0 there is no showRomanNumbers but there is numerals instead. This enables usage of different numerical systems or characters an emojis.

Examples

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

License

The ISC License

Author

Rastko Sasic