react-clock

library6.0.0jsnpmunverified

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.

web-framework

npm install react-clock

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CLOCK

react-clock

web-frameworkjavascriptv6.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Clock

✓ import Clock from 'react-clock';

✗ const Clock = require('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

✓ import type { ClockProps } from 'react-clock';

✗ import { 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)

✓ import * as ClockModule from 'react-clock';

✗ import Clock, { SomeOtherExport } 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.

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;

Debug

Known issues

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

affects: >=6.0.0

breakingReact'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.

affects: >=5.0.0

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

affects: >=5.0.0

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

affects: >=4.4.0

gotchaWhen 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" />`.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: require is not defined

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.

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.

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.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

reactrequiredCore React functionality for component rendering.

react-domrequiredDOM rendering capabilities for React components.

@types/reactoptionalTypeScript type definitions for React. Optional since v4.4.0 to avoid duplicate typings.

@types/react-domoptionalTypeScript type definitions for ReactDOM. Optional since v4.4.0 to avoid duplicate typings.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/wojtekmaj/react-clock ↗

packagehttps://www.npmjs.com/package/react-clock ↗