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

License

The MIT License.

Author

Wojciech Maj kontakt@wojtekmaj.pl http://wojtekmaj.pl