2.4.1 • Published 5 years ago

@meecolabs/react-clock v2.4.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

downloads build dependencies dev dependencies tested with jest

React-Clock

An analog clock for your React app.

tl;dr

  • Install by executing npm install react-clock or yarn 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 don't want to use default React-Clock styling to build upon it, you can import React-Clock by using import Clock from 'react-clock/dist/entry.nostyle'; instead.

User guide

Clock

Displays a complete clock.

Props

Prop nameDescriptionExample values
classNameDefines class name(s) that will be added along with "react-clock" to the main React-Clock <time> element.String: "class1 class2"Array of strings: ["class1", "class2 class3"]
hourHandLengthDefines the length of an hour hand, in %. Defaults to 50.80
hourHandOppositeLengthDefines the length of the part of an hour hand on the opposite side the hand is pointing to, in %. Defaults to 10.20
hourHandWidthDefines the width of an hour hand, in pixels. Defaults to 4.3
hourMarksLengthDefines the length of hour marks, in %. Defaults to 10.8
hourMarksWidthDefines the width of hour marks, in pixels. Defaults to 3.2
minuteHandLengthDefines the length of a minute hand, in %. Defaults to 70.80
minuteHandOppositeLengthDefines the length of the part of a minute hand on the opposite side the hand is pointing to, in %. Defaults to 10.20
minuteHandWidthDefines the width of a minute hand, in pixels. Defaults to 2.3
minuteMarksLengthDefines the length of minute marks, in %. Defaults to 6.8
minuteMarksWidthDefines the width of a minute hand, in pixels. Defaults to 1.2
renderHourMarksDefines whether hour marks shall be rendered. Defaults to true.false
renderMinuteHandDefines whether minute hand shall be rendered. Defaults to true.false
renderMinuteMarksDefines whether minute marks shall be rendered. Defaults to true.false
renderNumbersDefined whether numbers shall be rendered. Defaults to false.true
renderSecondHandDefines whether second hand shall be rendered. Defaults to true.false
secondHandLengthDefines the length of a second hand, in %. Defaults to 90.80
secondHandOppositeLengthDefines the length of the part of a second hand on the opposite side the hand is pointing to, in %. Defaults to 10.20
secondHandWidthDefines the width of a second hand, in pixels. Defaults to 1.2
styleCss style object.
valueDefines the value of the clock. Must be provided.Date: new Date()

License

The MIT License.

Author