@arcataroger/react-clock-milliseconds
TypeScript icon, indicating that this package has built-in type declarations

4.3.2 • Public • Published

npm downloads CI

React-Clock

An analog clock for your React app.

Forked from @wojtekmaj/react-clock to add milliseconds support until the relevant upstream PR is accepted.

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

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"]
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. 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
useMilliseconds If true, all rendered hands will use angles in between full integer seconds. Useful for stopwatches. false true
size Clock size, in pixels (e.g. 200) or as string (e.g. "50vw"). 150
  • Number: 250
  • String: "50vw"
value Clock value. Must be provided. n/a Date: new Date()

License

The MIT License.

Author

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

Package Sidebar

Install

npm i @arcataroger/react-clock-milliseconds

Weekly Downloads

3

Version

4.3.2

License

MIT

Unpacked Size

80.2 kB

Total Files

55

Last publish

Collaborators

  • arcataroger