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

ras-react-component

1.1.50 • Public • Published

downloads language license

REACT ANALOG CLOCK

Just an analog clock for your React app.

Github

Sasicrastko/REACT-ANALOG-CLOCK

Demo

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

Installation

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

Elements

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

elements

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

Prop name Description Example values Default value
showRomanNumbers Boolean value that determines what kind of numbers will be rendered, Roman or Arabic true or false false
showMinuteScale Boolean value that determines if the minute scale will be rendered. true or false true
showHourScale Boolean value that determines if the hour scale will be rendered. true or false true
showNumbers Boolean value that determines if the numbers should be rendered. true or false true
radialDirectionOfNumbers Boolean value that determines if the numbers should be rendered radialy. By default they are rendered horizontally true or false false
colorOfScalesAndNumbers String that determines color of the scales and the numbers. "black" or "#1a1a1a" or "rgb(255,0,0)" or "transparent" "black"
hourHandColor String that determines color of the hour hand. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "#151515"
minuteHandColor String that determines color of the minute hand. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "black"
secondHandColor String that determines color of the second hand. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "red"
firstCircleColor String that determines color of the first concentric circle. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "white"
secondCircleColor String that determines color of the second concentric circle. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "white"
thirdCircleColor String that determines color of the third concentric circle. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "white"
fourthCircleColor String that determines color of the fourth concentric circle. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "black"
centerDotColor String that determines color of the dot in the center. "black" or "#1a1a1a" or "rgb(15,15,15)" or "transparent" "black"
width Number that determines clock width (in pixels). It should be an integer. 400 300
numberSize Number that determines the size of the numbers. It should be an integer. 400 300
iana String that determines the time zone. It should be in IANA format. America/Chicago ""

Examples

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

examples

License

The ISC License

Author

Rastko Sasic

Install

npm i ras-react-component

DownloadsWeekly Downloads

4

Version

1.1.50

License

ISC

Unpacked Size

1.59 MB

Total Files

15

Last publish

Collaborators

  • avatar