wojtekmaj/react-clock

An analog clock for your React app.

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

react-clock's Issues

Color Customization

There is a way that I can customize the color of the pointers and hour/minutes marker?

react-clock has dependency on "@types/react": "*"

Yarn is pulling in @types/react 18 into my react 17 project because of this transitive dependency which is causing type errors due to incompatible react definitions.

Have a timezone prop for the clock component

Hi, I'm thinking that it could be nice to add a 'timezone': string prop to the clock, making it easier to display other timezones no matter what the local time of the user is.

It could be implemented using the ECMAScript Internationalization API, which takes into account the Daylight Saving Time offset with respect to UTC in the summer months.

Example (without having the timezone prop):

const getUTCDateForTimezone = (timeZone: string): Date => {
  const format = new Intl.DateTimeFormat("en-US", {
    timeZone, // options available in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
    year: "numeric",
    month: "numeric",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    hour12: false,
  });

  const date = new Date();

  const result = new Date(format.format(date));
  result.setMilliseconds(date.getMilliseconds());

  return result;
}

And then when adding the clock in React:

const [value, setValue] = useState(
    getUTCDateForTimezone("Europe/Madrid")
  );

  useEffect(() => {
    const interval = setInterval(
      () => setValue(getUTCDateForTimezone("Europe/Madrid")),
      1000
    );

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

By the way, this topic is kind of related to #18

Trick to make clock responsive (css)

Hi!

I leave a css trick to make react-clock responsive.

  <React.Fragment className={'container'}>
    <Clock value={value}/>
  </React.Fragment>

.container {
  width: 300px;
}

.react-clock {
  width: inherit !important;
  padding-top: 100%;
}

I hope you find it useful and thanks for your work.

Dropdown Mode

The analog clock is cool but is there support for a dropdown mode so that I can use that with the datetime widget ?

React Native version?

Hi,

Can I use the same package for my react-native app ?or is there any alternate package available for the same

Doesn't appear to work

In my nextjs project I imported and ran following the directions (simple example using pre-built css). I got the below error code. I'd love to use your clock but it doesn't look like it works :/.

Unexpected token .

/Users/patientplatypus/Documents/patientplatypus.com/forum/node_modules/react-clock/dist/Clock.css:1
(function (exports, require, module, __filename, __dirname) { .react-clock {
                                                              ^

SyntaxError: Unexpected token .
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:656:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/patientplatypus/Documents/patientplatypus.com/forum/node_modules/react-clock/dist/entry.js:12:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

Drag clock hands and set time?

Is there a way I can add a drag event to the hands of the clock and set the time that way?

Have multiple clocks showing multiple timezones

If I have multiple clocks and using the basic usage code, what's the best approach to mutate the state to show a different timezone for each clock?

E.g
Clock 1: UTC-6
Clock 2: UTC-5
Clock 3: UTC-2

Thanks!

How does one get the same styling as the demo?

I looked through the documentation, but it's not there. Specifically the white border, the size of the border, the red circle of the second hand, and the fluid second hand movement. Any chance the dev can share the settings?

Thanks.

TS2589: Type instantiation is excessively deep and possibly infinite.

I am getting this compilation error:

TS2589: Type instantiation is excessively deep and possibly infinite.

I attached a screenshot of a code snippet and these are my relevant dependencies:

"react": "18.2.0",
"react-clock": "^4.1.0",
"react-dom": "18.2.0",
"react-scripts": "5.0.1",
"typescript": "4.4.2",

React clock not displaying

Hi,
I can't seem to make the clock render correctly.
I made a new react project using create-react-app and followed the example from the docs but nothing is rendered

see exmpale here:
https://codesandbox.io/s/9vu0o?file=/src/App.js

is this package still supported?

Clock does not print

Thank you for this component!

When printing a webpage where clocks are displayed, the clocks do not print correctly, only their outline is printed.

A simple fix is to add the following css:

  .react-clock {
    -webkit-print-color-adjust: exact;
    color-adjust: exact !important; 
  }

I have tested it with Chrome and Firefox.

MinTime does not accept New Date() as value

<TimePicker 
allowEmpty={false}
use12Hours={true}
onFocus={ () => this.handleFocus()}
onChange={ (date) => this.props.handleTimeChange(date, 'click') }
showSecond={false}
id='service-time-picker'
/>

minTime={ new Date() } when trying to supply minTime new Date() is it supposed to disable past time and minutes?? please help thank you

Error: require() of ES Module

I'm using react-datetimerange-picker which has react-clock as a sub-dependency. When I try to run my NextJs app I get the following error:

Error: require() of ES Module /Users/dean/dev/oyoun-project/node_modules/react-clock/node_modules/get-user-locale/dist/esm/index.js from /Users/dean/dev/oyoun-project/node_modules/react-clock/dist/cjs/shared/hourFormatter.js not supported. Instead change the require of index.js in /Users/dean/dev/oyoun-project/node_modules/react-clock/dist/cjs/shared/hourFormatter.js to a dynamic import() which is available in all CommonJS modules.

I have in my package.json the type: module. I assume this is causing the error, which says I cannot use the require statement.

Have you encountered this before?

100% cpu

I get really terrible performance when passing a Date as value.

Broser: Chrome 80
OS: macOS

It seems as that the datetime attribute updates on every frame, see screenshot.

Code

import React, { useState } from 'react'
import Clock from 'react-clock'
// import './App.css'

function App() {
  const [time, setTime] = useState(new Date())

  setInterval(() => setTime(new Date()), 1000)

  return (
    <Clock
      value={time}
    />
  )
}

export default App

Edit: I'm testing in a create-react-app production build with npx serve build

Support locales

Please include a prop with numbersType to be in persian or english format like this :

numbersType={"persian" ||  "english"}

// In english -> 12345...
// In persian -> ۱۲۳۴۵...

Thanks in advance .