react-clock

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 ``.

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 { 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 (
    

  );
}

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

String: "class1 class2"

Array of strings: ["class1", "class2 class3"]

| | data-testid | The test ID used for testing purposes. | n/a | 'clock' | | formatHour | Function called to override default formatting of hour marks. Can be used to use your own formatting function. | (default formatter) | (locale, hour) => formatHour(hour, 'HH') | | 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 | | locale | Locale that should be used by the clock. Can be any IETF language tag. Note: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | "hu-HU" | | 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 (e.g. 200) or as string (e.g. "50vw"). | 150 |

Number: 250

String: "50vw"

                                        |

| useMillisecondPrecision | Whether to use millisecond precision.