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

A minimal demo page can be found 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, { useEffect, useState } from 'react';
import Clock from 'react-clock';

function MyApp() {
  const [value, setValue] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(
      () => setValue(new Date()),
      1000
    );

    return () => {
      clearInterval(interval);
    }
  }, []);

  return (
    <div>
      <p>Current time:</p>
      <Clock value={value} />
    </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

License

The MIT License.

Author

Wojciech Maj [email protected] https://wojtekmaj.pl