{"id":25132981,"url":"https://github.com/vikramsamak/react-realtime-clock","last_synced_at":"2026-02-15T10:10:18.908Z","repository":{"id":257808565,"uuid":"867225010","full_name":"vikramsamak/react-realtime-clock","owner":"vikramsamak","description":"A React component library with a real-time clock and essential hooks like `useTimeElapsed`, `useStopWatch`, and `useCountdown` for versatile time-tracking features.","archived":false,"fork":false,"pushed_at":"2024-11-11T15:21:40.000Z","size":898,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T09:06:56.434Z","etag":null,"topics":["clock","component","date","library","react","typescript"],"latest_commit_sha":null,"homepage":"https://storybook-react-realtime-clock.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikramsamak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-03T17:04:09.000Z","updated_at":"2024-11-11T15:21:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"65e90f01-550b-4dee-b027-fe7653cdbfdc","html_url":"https://github.com/vikramsamak/react-realtime-clock","commit_stats":null,"previous_names":["vikramsamak/react-realtime-clock"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikramsamak%2Freact-realtime-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikramsamak%2Freact-realtime-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikramsamak%2Freact-realtime-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikramsamak%2Freact-realtime-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikramsamak","download_url":"https://codeload.github.com/vikramsamak/react-realtime-clock/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250522920,"owners_count":21444626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","component","date","library","react","typescript"],"created_at":"2025-02-08T15:19:30.062Z","updated_at":"2026-02-15T10:10:13.852Z","avatar_url":"https://github.com/vikramsamak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-realtime-clock\n\n![npm](https://img.shields.io/npm/v/react-realtime-clock)\n![npm](https://img.shields.io/npm/dw/react-realtime-clock)\n\nA React component library with a real-time clock and essential hooks like useTimeElapsed, useStopWatch, and useCountdown for versatile time-tracking features.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Tailwind CSS Support](#tailwind-css-support)\n- [Usage](#usage)\n- [Props](#props)\n- [Examples](#examples)\n- [Customization](#customization)\n- [Hooks](#hooks)\n- [License](#license)\n\n## Installation\n\nYou can install the library using npm or yarn:\n\n```bash\n  npm install react-realtime-clock\n```\n\n## Tailwind CSS Support\n\nThis library is styled using **Tailwind CSS**. To use the styles as intended, please ensure that Tailwind CSS is installed and configured in your project.\n\n## Usage\n\nHere’s how to use the `RealTimeClock` component in your application:\n\n```tsx\nimport React from 'react';\nimport { RealTimeClock } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cRealTimeClock\n        timeZone=\"Asia/Kolkata\"\n        format=\"hh:mm:ss A\"\n        clockTextClassName=\"text-3xl font-bold text-white\"\n        containerClassName=\"bg-blue-600 p-4 rounded\"\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Props\n\n| Prop                   | Type                | Default        | Description                                                                                    |\n|------------------------|---------------------|----------------|------------------------------------------------------------------------------------------------|\n| `containerClassName`   | `string`            | `undefined`    | Additional class names for the container element.                                              |\n| `clockTextClassName`   | `string`            | `undefined`    | Additional class names for the clock text element.                                             |\n| `timeZone`             | `TimezoneType`      | `\"UTC\"`        | Time zone for the clock (e.g., `\"America/New_York\"`).                                          |\n| `format`               | `FormatType`        | `\"HH:mm:ss\"`   | Format for displaying the time (e.g., `\"hh:mm:ss A\"`).                                         |\n| `clockType`            | `typeof DIGITAL_CLOCK_TYPE or typeof ANALOG_CLOCK_TYPE` |`DIGITAL_CLOCK_TYPE`| Specifies whether to display a digital or analog clock. |\n| `clockSize`                   | `number`                                  | `200`                          | Size of the analog clock in pixels.                                                          |\n| `renderAnalogClockNumbers`    | `boolean`                                 | `true`                         | Indicates whether to display numbers on the analog clock.                                   |\n\n## Examples\n\nThis section provides various examples of how to use the `RealTimeClock` component in your React application.\n\n### Example 1: Basic Clock\n\nA simple example of a clock displaying the current time in UTC:\n\n```tsx\nimport React from 'react';\nimport { RealTimeClock } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cRealTimeClock timeZone=\"UTC\" format=\"HH:mm:ss\" /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Example 2: Clock with Custom Styles\n\nCustomize the appearance of the clock with additional class names:\n\n```tsx\nimport React from 'react';\nimport { RealTimeClock } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cRealTimeClock\n        timeZone=\"Europe/Berlin\"\n        format=\"MMMM Do YYYY, hh:mm A\"\n        clockTextClassName=\"text-2xl font-semibold text-gray-900\"\n        containerClassName=\"p-4 bg-gray-200 rounded-lg\"\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Example 3: Real-Time Clock with Different Time Zones\n\nDisplay the clock with different time zones dynamically:\n\n```tsx\nimport React, { useState } from 'react';\nimport { RealTimeClock } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  const [timeZone, setTimeZone] = useState(\"Asia/Kolkata\");\n  const [format, setFormat] = useState(\"hh:mm:ss A\");\n\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cRealTimeClock\n        timeZone={timeZone}\n        format={format}\n        clockTextClassName=\"text-3xl font-bold text-white\"\n        containerClassName=\"bg-blue-600 p-4 rounded\"\n      /\u003e\n      \u003cselect value={timeZone} onChange={(e) =\u003e setTimeZone(e.target.value)}\u003e\n        \u003coption value=\"UTC\"\u003eUTC\u003c/option\u003e\n        \u003coption value=\"Asia/Kolkata\"\u003eAsia/Kolkata\u003c/option\u003e\n        \u003coption value=\"America/New_York\"\u003eAmerica/New_York\u003c/option\u003e\n        \u003coption value=\"Europe/Berlin\"\u003eEurope/Berlin\u003c/option\u003e\n        \u003coption value=\"America/Los_Angeles\"\u003eAmerica/Los_Angeles\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cselect value={format} onChange={(e) =\u003e setFormat(e.target.value)}\u003e\n        \u003coption value=\"HH:mm:ss\"\u003eHH:mm:ss\u003c/option\u003e\n        \u003coption value=\"hh:mm:ss A\"\u003ehh:mm:ss A\u003c/option\u003e\n        \u003coption value=\"MMMM Do YYYY, h:mm:ss a\"\u003eMMMM Do YYYY, h:mm:ss a\u003c/option\u003e\n        \u003coption value=\"MM/DD/YYYY, h:mm A\"\u003eMM/DD/YYYY, h:mm A\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Example 4: Full Customization with Analog Clock\n\nCombine all props for a fully customized analog clock experience:\n\n```tsx\nimport React from 'react';\nimport { RealTimeClock } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cRealTimeClock\n        timeZone=\"Australia/Sydney\"\n        format=\"dddd, MMMM Do YYYY, hh:mm A\"\n        clockTextClassName=\"text-4xl font-extrabold text-yellow-500\"\n        containerClassName=\"flex items-center justify-center h-screen bg-gradient-to-r from-purple-500 to-blue-500\"\n        clockType={ANALOG_CLOCK_TYPE}\n        clockSize={250}\n        renderAnalogClockNumbers={true}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n\n```\n\n## Customization\n\nThe `RealTimeClock` component offers various customization options, allowing you to tailor its appearance and functionality to fit your application’s design and requirements.\n\n### 1. Styling the Clock\n\nYou can customize the appearance of the clock by using the following props:\n\n- **`containerClassName`**: This prop allows you to add custom styles to the container of the clock. You can use any Tailwind CSS or custom class names here.\n\n  ```tsx\n  \u003cRealTimeClock\n    containerClassName=\"bg-gray-800 p-4 rounded-lg shadow-lg\"\n  /\u003e\n  ```\n\n### 2. Time Zone Selection\n\nThe clock supports various time zones, which you can set using the timeZone prop. This prop accepts any valid IANA time zone string.\n\nExample of setting the time zone to America/New_York:\n\n```tsx\n\u003cRealTimeClock timeZone=\"America/New_York\" /\u003e\n```\n\n### 3. Time Format\n\nThe format prop allows you to specify how the time should be displayed. You can use the following format strings:\n\n- \"HH:mm:ss\": 24-hour format\n- \"hh:mm:ss A\": 12-hour format with AM/PM\n- \"MMMM Do YYYY, h:mm:ss a\": Full month name and year\n- \"MM/DD/YYYY, h:mm A\": US date format\n- \"YYYY-MM-DD HH:mm:ss\": ISO date format\n- \"HH:mm\": Simple hour and minute\n- \"hh:mm A\": Simple hour and minute with AM/PM\n- \"dddd, MMMM Do YYYY\": Full weekday name, month, and year\n\nExample of setting the format to a 12-hour clock:\n\n```tsx\n\u003cRealTimeClock format=\"hh:mm:ss A\" /\u003e\n```\n\n### 4. Clock Type\n\nYou can set the type of clock to either digital or analog using the clockType prop. You can also control the size of the analog clock using the clockSize prop.\n\nExample of setting the clock to analog:\n\n```tsx\n\u003cRealTimeClock\n  clockType={ANALOG_CLOCK_TYPE}\n  clockSize={200}\n  renderAnalogClockNumbers={true}\n/\u003e\n```\n\n### 5. Combining Customizations\n\nYou can combine the above customization options for a fully personalized clock display:\n\n```tsx\nimport React from 'react';\nimport { RealTimeClock } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cRealTimeClock\n        timeZone=\"Asia/Kolkata\"\n        format=\"hh:mm:ss A\"\n        clockTextClassName=\"text-3xl font-bold text-green-500\"\n        containerClassName=\"bg-gray-900 p-4 rounded-lg shadow-lg\"\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### 6. Responsive Design\n\nThe component is designed to be responsive. You can use Tailwind CSS utility classes to make it adapt to various screen sizes. For example, using responsive font sizes:\n\n```tsx\n\u003cRealTimeClock\n  clockTextClassName=\"text-xl md:text-3xl lg:text-4xl\"\n/\u003e\n```\n\n## Hooks\n\n### `useTimeElapsed`\n\nThe `useTimeElapsed` hook is a custom hook that calculates the elapsed time from a specified target date in a specific time zone. It provides the flexibility to start and stop the counting based on provided conditions.\n\n### Example\n\n```tsx\nimport { useTimeElapsed } from \"react-realtime-clock\";\n\nconst App = () =\u003e {\n  const timeElapsed = useTimeElapsed({\n    targetDate: \"2000-02-22T00:00:00Z\", \n    timeZone: \"Asia/Kolkata\",\n    countingConditions: {\n      startCondition: true,\n      stopCondition: false,  \n    },\n  });\n\n  return \u003cdiv\u003e{timeElapsed}\u003c/div\u003e;\n};\n```\n\n#### Parameters\n\n| Parameter            | Type                                      | Default                         | Description                                                                                   |\n|----------------------|-------------------------------------------|---------------------------------|-----------------------------------------------------------------------------------------------|\n| `targetDate`         | `string or Date`                          | `undefined`                     | The date from which to calculate the elapsed time.                                           |\n| `timeZone`           | `TimezoneType`                            | `\"Asia/Kolkata\"`               | The time zone in which to calculate the elapsed time.                                       |\n| `countingConditions` | `{ startCondition: boolean, stopCondition: boolean }` | `{ startCondition: false, stopCondition: false }` | An object to control when to start and stop the counting.                                   |\n\n#### Returns\n\n- `string`: A formatted string representing the elapsed time based on the target date and time zone.\n\n## License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n### Summary of the MIT License\n\nThe MIT License is a permissive free software license that allows users to:\n\n- Use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.\n- Allow others to do the same with their copies of the Software.\n\n### Conditions\n\nThe only conditions are:\n\n- The above copyright notice and this permission notice must be included in all copies or substantial portions of the Software.\n- The Software is provided \"as is\", without warranty of any kind. The authors are not liable for any damages or issues arising from its use.\n\n### For More Information\n\nFor the full text of the MIT License, please see the [LICENSE](LICENSE) file in this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikramsamak%2Freact-realtime-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikramsamak%2Freact-realtime-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikramsamak%2Freact-realtime-clock/lists"}