eval-react-clock

eval-react-clock

An analog clock for your React app.

tl;dr

• Install by executing npm install eval-react-clock or yarn add eval-react-clock.
• Import by adding import Clock from 'eval-react-clock'.
• Use by adding <Clock />.

Installation

Add eval-react-clock to your project by executing npm install eval-react-clock or yarn add eval-react-clock.

Usage

Here's an example of basic usage:

import { useEffect, useState } from 'react';
import Clock from 'eval-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 eval-react-clock styling to build upon it, you can import eval-react-clock's styles by using:

import 'eval-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 "eval-react-clock" to the main eval-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. 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.	false	true
value	Clock value. Must be provided.	n/a	Date: new Date()

License

The MIT License.

Author

	Wojciech Maj
	Nisar A