Just an analog clock for your React app.
Sasicrastko/REACT-ANALOG-CLOCK
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.
Characteristic | Description | Example values | Default value |
---|---|---|---|
width | Number that determines clock width (in pixels). It should be an integer. | 400 |
300 |
numerals | Array or string that determines what numerical system is used for numbers. Default value is "western_arabic" . If it is array all elements must be strings. |
"western_arabic" , "eastern_arabic" , "roman" , "persian" , "chinese" , "devanagari”" , "tamil" , "bengali" , "gujarati" , "korean" , "hebrew" or a string array like ["", "", "3","", "", "6","", "", "9","", "", "12"] or with emojis ["🐴","🐮","🐷","🐹","🐗","🐻","🐔","🐵","🐶","🦊","🐱"] |
"western_arabic" |
showMinuteScale | Boolean value that determines if the minute scale should be rendered. | true or false |
true |
showHourScale | Boolean value that determines if the hour scale should 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" |
numberSize | Number that determines the size of the numbers. It should be an integer. | 400 |
200 |
iana | String that determines the time zone. It should be in IANA format. | "America/Chicago" or undefined , null and "" for local time |
"Europe/London" |
The look of the watch can be set on many ways and some of examples are on the image bellow.
Rastko Sasic