{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-clock"],"cli":null},"imports":["import Clock from 'react-clock';","import type { ClockProps } from 'react-clock';","import * as ClockModule from 'react-clock';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}