{"id":11662,"library":"react-clock","title":"React Analog Clock","description":"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.","status":"active","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/wojtekmaj/react-clock","tags":["javascript","clock","digital clock","analog clock","time","react","typescript"],"install":[{"cmd":"npm install react-clock","lang":"bash","label":"npm"},{"cmd":"yarn add react-clock","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-clock","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React functionality for component rendering.","package":"react","optional":false},{"reason":"DOM rendering capabilities for React components.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React. Optional since v4.4.0 to avoid duplicate typings.","package":"@types/react","optional":true},{"reason":"TypeScript type definitions for ReactDOM. Optional since v4.4.0 to avoid duplicate typings.","package":"@types/react-dom","optional":true}],"imports":[{"note":"The package is ESM-only since v6.0.0, so CommonJS 'require' is no longer supported for importing the main Clock component.","wrong":"const Clock = require('react-clock');","symbol":"Clock","correct":"import Clock from 'react-clock';"},{"note":"Import ClockProps as a type for explicit TypeScript usage, available since v4.3.0.","wrong":"import { ClockProps } from 'react-clock';","symbol":"ClockProps","correct":"import type { ClockProps } from 'react-clock';"},{"note":"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.","wrong":"import Clock, { SomeOtherExport } from 'react-clock';","symbol":"All named exports (e.g., in a bundler)","correct":"import * as ClockModule from 'react-clock';"}],"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport Clock from 'react-clock';\nimport 'react-clock/dist/Clock.css'; // Don't forget to import the CSS!\n\nfunction MyAnalogClock() {\n  const [value, setValue] = useState(new Date());\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => setValue(new Date()),\n      1000\n    );\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div>\n      <h1>Current Analog Time</h1>\n      <Clock \n        value={value} \n        size={200} \n        renderNumbers={true} \n        hourMarksLength={10} \n        minuteMarksLength={5}\n        className=\"my-custom-clock\"\n      />\n      <p>This clock updates every second.</p>\n    </div>\n  );\n}\n\nexport default MyAnalogClock;","lang":"typescript","description":"This example demonstrates how to render a basic analog clock that updates every second using React hooks."},"warnings":[{"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.","message":"The package dropped CommonJS (CJS) build and became ESM-only in v6.0.0. Projects using CommonJS `require()` will fail to import the package.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"React's new JSX transform is now required since v5.0.0. Projects not configured for this transform will encounter build errors.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Migrate from `propTypes` to TypeScript or another static type-checking solution. The package itself ships with TypeScript types, which are recommended for use.","message":"The `propTypes` were removed in v5.0.0. If your application relies on `propTypes` for type checking, it will break.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=4.4.0"},{"fix":"Pass a consistent `locale` prop to the `Clock` component during both server and client rendering, e.g., `<Clock value={value} locale=\"en-US\" />`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `const Clock = require('react-clock');` to `import Clock from 'react-clock';`","cause":"Attempting to use CommonJS `require()` syntax to import `react-clock` in an ESM-only environment.","error":"ReferenceError: require is not defined"},{"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'`.","cause":"Your React project is not configured to use the new JSX transform, which became a requirement in `react-clock` v5.0.0.","error":"Error: Children must be passed to createElement, not to React.Children.map or React.Children.toArray."},{"fix":"Remove any usage of `propTypes` with `react-clock`. For type checking, rely on TypeScript or another external validation library.","cause":"Accessing `propTypes` on the `Clock` component, which were removed in `react-clock` v5.0.0.","error":"TypeError: Cannot read properties of undefined (reading 'bool') or Similar 'propTypes' error."}],"ecosystem":"npm"}