React Analog Clock

6.0.0 · active · verified Sun Apr 19

React-clock is a specialized React component library offering an analog clock display for web applications. It provides a highly configurable clock, allowing developers to set the current time, specify display precision down to milliseconds, and customize the appearance of hour marks and numbers. The library is currently stable at version 6.0.0 and actively maintained, with regular updates addressing bug fixes, performance enhancements, and compatibility with the latest React versions, including React 19. It ships with full TypeScript support, exporting its component props for robust type-checking. A key differentiator is its focus purely on an analog clock interface, providing a lightweight, purpose-built solution without the overhead of digital or calendar functionalities, offering a simple and elegant way to integrate time visualization into React applications. As of v6.0.0, it is an ESM-only package.

Common errors

```
ReferenceError: require is not defined
```
cause Attempting to use CommonJS `require()` syntax to import `react-clock` in an ESM-only environment.

fix Change `const Clock = require('react-clock');` to `import Clock from 'react-clock';`
```
Error: Children must be passed to createElement, not to React.Children.map or React.Children.toArray.
```
cause Your React project is not configured to use the new JSX transform, which became a requirement in `react-clock` v5.0.0.

fix Update your Babel or TypeScript configuration to enable React's new JSX transform. For Babel, ensure `@babel/preset-react` is configured with `runtime: 'automatic'`.
```
TypeError: Cannot read properties of undefined (reading 'bool') or Similar 'propTypes' error.
```
cause Accessing `propTypes` on the `Clock` component, which were removed in `react-clock` v5.0.0.

fix Remove any usage of `propTypes` with `react-clock`. For type checking, rely on TypeScript or another external validation library.

Warnings

breaking The package dropped CommonJS (CJS) build and became ESM-only in v6.0.0. Projects using CommonJS `require()` will fail to import the package.
Fix: Migrate your project to use ESM `import` statements and ensure your build tools (like Webpack, Rollup, or Vite) are configured for ESM. For Jest users, consider migrating to Vitest or configuring Jest to handle ESM, as it may cause issues with unit tests.
breaking React's new JSX transform is now required since v5.0.0. Projects not configured for this transform will encounter build errors.
Fix: Enable the new JSX transform in your Babel or TypeScript configuration. Refer to the official React blog post on the new JSX transform for detailed instructions.
breaking The `propTypes` were removed in v5.0.0. If your application relies on `propTypes` for type checking, it will break.
Fix: Migrate from `propTypes` to TypeScript or another static type-checking solution. The package itself ships with TypeScript types, which are recommended for use.
gotcha The `@types/react` and `@types/react-dom` packages became optional peerDependencies in v4.4.0. While this helps avoid duplicate typings, ensure they are correctly installed in TypeScript projects if not already present, as they are fundamental for React development.
Fix: Manually install `@types/react` and `@types/react-dom` if you are using TypeScript and they are not automatically resolved by your package manager or already present as direct dependencies.
gotcha When using Server-Side Rendering (SSR), ensure the `locale` prop is explicitly set to prevent hydration errors caused by locale mismatch between server and client.
Fix: Pass a consistent `locale` prop to the `Clock` component during both server and client rendering, e.g., `<Clock value={value} locale="en-US" />`.

Install

npm install react-clock npm
yarn add react-clock yarn
pnpm add react-clock pnpm

Imports

Clock
wrong:
```
const Clock = require('react-clock');
```
correct:
```
import Clock from 'react-clock';
```
The package is ESM-only since v6.0.0, so CommonJS 'require' is no longer supported for importing the main Clock component.
ClockProps
wrong:
```
import { ClockProps } from 'react-clock';
```
correct:
```
import type { ClockProps } from 'react-clock';
```
Import ClockProps as a type for explicit TypeScript usage, available since v4.3.0.
All named exports (e.g., in a bundler)
wrong:
```
import Clock, { SomeOtherExport } from 'react-clock';
```
correct:
```
import * as ClockModule from 'react-clock';
```
While the main component is a default export, other utilities or types are named exports. Named export support was added in v4.2.0. Ensure your bundler supports ESM for all imports.

Quickstart

This example demonstrates how to render a basic analog clock that updates every second using React hooks.

import React, { useState, useEffect } from 'react';
import Clock from 'react-clock';
import 'react-clock/dist/Clock.css'; // Don't forget to import the CSS!

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

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

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

  return (
    <div>
      <h1>Current Analog Time</h1>
      <Clock 
        value={value} 
        size={200} 
        renderNumbers={true} 
        hourMarksLength={10} 
        minuteMarksLength={5}
        className="my-custom-clock"
      />
      <p>This clock updates every second.</p>
    </div>
  );
}

export default MyAnalogClock;

view raw JSON →