React-Clock
An analog clock for your React app.
tl;dr
- Install by executing
npm install react-clockoryarn add react-clock. - Import by adding
import Clock from 'react-clock'. - Use by adding
<Clock />.
Demo
Minimal demo page is included in sample directory.
Online demo is also available!
Installation
Add React-Clock to your project by executing npm install react-clock or yarn add react-clock.
Usage
Here's an example of basic usage:
import React, { Component } from 'react';
import Clock from 'react-clock';
class MyApp extends Component {
state = {
date: new Date(),
}
componentDidMount() {
setInterval(
() => this.setState({ date: new Date() }),
1000
);
}
render() {
return (
<div>
<p>Current time:</p>
<Clock
value={this.state.date}
/>
</div>
);
}
}
Custom styling
If you want to use default React-Clock styling to build upon it, you can import React-Clock's styles by using:
import 'react-clock/dist/Clock.css';
User guide
Clock
Displays a complete clock.
Props, Prop name, Description, Default value, Example values, ----, ----, ----, ----, className, Class name(s) that will be added along with "react-clock" to the main React-Clock <time> element., n/a, String: "class1 class2"Array of strings: ["class1", "class2 class3"], hourHandLength, Hour hand length, in %., 50, 80, hourHandOppositeLength, The length of the part of an hour hand on the opposite side the hand is pointing to, in %., 10, 20, hourHandWidth, Hour hand width, in pixels., 4, 3, hourMarksLength, Hour marks length, in %., 10, 8, hourMarksWidth, Hour marks width, in pixels., 3, 2, minuteHandLength, Minute hand length, in %., 70, 80, minuteHandOppositeLength, The length of the part of a minute hand on the opposite side the hand is pointing to, in %., 10, 20, minuteHandWidth, Minute hand width, in pixels., 2, 3, minuteMarksLength, Minute marks length, in %., 6, 8, minuteMarksWidth, Minute marks width, in pixels., 1, 2, renderHourMarks, Whether hour marks shall be rendered., true, false, renderMinuteHand, Whether minute hand shall be rendered., true, false, renderMinuteMarks, Whether minute marks shall be rendered., true, false, renderNumbers, Whether numbers shall be rendered., false, true, renderSecondHand, Whether second hand shall be rendered., true, false, secondHandLength, Second hand length, in %., 90, 80, secondHandOppositeLength, The length of the part of a second hand on the opposite side the hand is pointing to, in %., 10, 20, secondHandWidth, Second hand width, in pixels., 1, 2, size, Clock size, in pixels., 150, 250, value, Clock value. Must be provided., n/a, Date: new Date(), ## License
The MIT License.