{"id":23926366,"url":"https://github.com/ixnode/node-simple-clock","last_synced_at":"2026-02-21T04:02:12.984Z","repository":{"id":269102673,"uuid":"859512605","full_name":"ixnode/node-simple-clock","owner":"ixnode","description":"A simple, updating clock component for React.","archived":false,"fork":false,"pushed_at":"2024-12-21T15:37:35.000Z","size":1762,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T17:59:21.254Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ixnode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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-09-18T19:38:39.000Z","updated_at":"2024-12-21T15:37:33.000Z","dependencies_parsed_at":"2024-12-20T23:28:09.911Z","dependency_job_id":"5ef23656-6050-4789-9005-bfc98a4ed98f","html_url":"https://github.com/ixnode/node-simple-clock","commit_stats":null,"previous_names":["ixnode/node-simple-clock"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/ixnode/node-simple-clock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixnode%2Fnode-simple-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixnode%2Fnode-simple-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixnode%2Fnode-simple-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixnode%2Fnode-simple-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ixnode","download_url":"https://codeload.github.com/ixnode/node-simple-clock/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixnode%2Fnode-simple-clock/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29672757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T03:11:15.450Z","status":"ssl_error","status_checked_at":"2026-02-21T03:10:34.920Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-01-05T21:14:04.535Z","updated_at":"2026-02-21T04:02:12.961Z","avatar_url":"https://github.com/ixnode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @ixnode/simple-clock\r\n\r\n[![Release](https://img.shields.io/github/v/release/ixnode/node-simple-clock)](https://github.com/ixnode/node-simple-clock/releases)\r\n[![](https://img.shields.io/github/release-date/ixnode/node-simple-clock)](https://github.com/twelvepics-com/php-calendar-builder/releases)\r\n[![npm version](https://badge.fury.io/js/@ixnode%2Fsimple-clock.svg)](https://www.npmjs.com/package/@ixnode/simple-clock)\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-^4.9-555555.svg?logo=typescript\u0026logoColor=white\u0026labelColor=3178c6\u0026style=flat)](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html)\r\n[![MIT License](https://img.shields.io/badge/license-MIT-green.svg)](https://opensource.org/licenses/MIT)\r\n\r\nA simple, customizable, and responsive clock component for React.\r\n\r\n## 🚀 Features\r\n\r\n* **Customizable** size and color\r\n* **Supports** both digital and analog clocks\r\n* Displays date, time zone and milliseconds\r\n* **Configurable** 12-hour and 24-hour formats\r\n* **Lightweight** and built with TypeScript\r\n* Build on top with [storybook](https://storybook.js.org/)\r\n\r\n## 📦 Installation\r\n\r\n```shell\r\nnpm install @ixnode/simple-clock\r\n```\r\n\r\nor\r\n\r\n```shell\r\nyarn add @ixnode/simple-clock\r\n```\r\n\r\n## 🔧 Usage\r\n\r\n### Basic Usage\r\n\r\n![Basic clock.](docs/images/basic.png \"Basic clock.\")\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { Clock } from '@ixnode/simple-clock';\r\nimport '@ixnode/simple-clock/dist/styles.css';\r\n\r\nconst App = () =\u003e (\r\n    \u003cClock size=\"large\" color=\"blue\" showDate={true} showBorder={true} showTimeZone={true} /\u003e\r\n);\r\n\r\nexport default App;\r\n```\r\n\r\n### More complex usage\r\n\r\n![Analog clock.](docs/images/analog.png \"Analog clock.\")\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { Clock } from '@ixnode/simple-clock';\r\nimport '@ixnode/simple-clock/dist/styles.css';\r\n\r\nconst App = () =\u003e (\r\n    \u003cClock color={'default'} size={'small'} isAnalog={true} timeZone={\"Europe/Berlin\"} locale={\"de-DE\"} /\u003e\r\n);\r\n\r\nexport default App;\r\n```\r\n\r\n## 🔧 Props\r\n\r\n| Prop              | Type                                | Default      | Description                                 |\r\n|-------------------|-------------------------------------|--------------|---------------------------------------------|\r\n| `color`           | `'default'\\|'red'\\|'green'\\|'blue'` | `'default'`  | Sets the color of the clock.                |\r\n| `size`            | `'small'\\|'medium'\\|'large'`        | `'medium'`   | Sets the size of the clock.                 |  \r\n| `showBorder`      | `boolean`                           | `false`      | Whether to show a border around the clock.  |\r\n| `use24HourFormat` | `boolean`                           | `true`       | Use 24-hour format (true) or AM/PM (false). |\r\n| `showTenths`      | `boolean`                           | `false`      | Show tenth of a second?                     | \r\n| `isAnalog`        | `boolean`                           | `false`      | Show an analog clock?                       |          \r\n| `showDate`        | `boolean`                           | `false`      | Show date?                                  |       \r\n| `showTimeZone`    | `boolean`                           | `false`      | Should a timezone be displayed?             | \r\n| `timeZoneType`    | `'short'\\|'long'`                   | `'short'`    | Which type of timezone should be displayed? | \r\n| `locale`          | `string`                            | `'en-US'`    | Which locale should be displayed?           |  \r\n| `timeZone`        | `string`                            | `'UTC'`      | Which time zone should be displayed?        | \r\n\r\n### Common locales (`locale`)\r\n\r\n`timeZone` is used with the `Intl.DateTimeFormat` API:\r\n\r\n| Locale  | Description                   |\r\n|---------|-------------------------------|\r\n| `en-US` | English (United States)       |\r\n| `en-GB` | English (United Kingdom)      |\r\n| `de-DE` | German (Germany)              |\r\n| `es-ES` | Spanish (Spain)               |\r\n| `fr-FR` | French (France)               |\r\n| `it-IT` | Italian (Italy)               |\r\n| `nl-NL` | Dutch (Netherlands)           |\r\n| `pl-PL` | Polish (Poland)               |\r\n| `pt-BR` | Portuguese (Brazil)           |\r\n| `ru-RU` | Russian (Russia)              |\r\n| `sv-SE` | Swedish (Sweden)              |\r\n| `zh-CN` | Chinese (Simplified, China)   |\r\n| `zh-TW` | Chinese (Traditional, Taiwan) |\r\n\r\n### Common Time Zone Formats and Examples (`timeZone`)\r\n\r\n`timeZone` is used with the `Intl.DateTimeFormat` API:\r\n\r\n#### 1. Common Time Zone Strings (IANA-TZ Format)\r\n\r\nThese strings are based on the IANA Time Zone Database, which defines time zones used worldwide:\r\n\r\n| Time Zone          | Description                      |\r\n|--------------------|----------------------------------|\r\n| `UTC`              | Coordinated Universal Time       |\r\n| `America/New_York` | Eastern Standard Time (EST)      |\r\n| `Europe/Berlin`    | Central European Time (CET)      |\r\n| `Asia/Tokyo`       | Japan Standard Time (JST)        |\r\n| `Australia/Sydney` | Australian Eastern Time (AET)    |\r\n| `Africa/Cairo`     | East Africa Time (EAT)           |\r\n| `Pacific/Auckland` | New Zealand Standard Time (NZST) |\r\n\r\n#### 2. Short Time Zone Formats (Offset-based)\r\nThese formats use the offset from UTC in hours and minutes. Examples:\r\n\r\n| Time Zone | Description            |\r\n|-----------|------------------------|\r\n| `GMT`     | Greenwich Mean Time    |\r\n| `+02:00`  | Two hours ahead of UTC |\r\n| `-05:00`  | Five hours behind UTC  |\r\n\r\n#### 3. Abbreviated Time Zone Codes\r\n\r\n**Note:** These are not supported by the `Intl` API and are not standardized. However, many abbreviations are commonly used in practice, such as:\r\n\r\n| Abbreviation | Description                     |\r\n|--------------|---------------------------------|\r\n| `PST`        | Pacific Standard Time (UTC-8)   |\r\n| `CET`        | Central European Time (UTC+1)   |\r\n| `IST`        | Indian Standard Time (UTC+5:30) |\r\n\r\n## 🛠 Development\r\n\r\n### Building the Project\r\n\r\nTo build the project locally:\r\n\r\n```shell\r\nnpm run build\r\n```\r\n\r\n### Running Storybook\r\n\r\nView and develop components in isolation:\r\n\r\n```shell\r\nnpm run storybook\r\n```\r\n\r\nOpen: http://localhost:6006/\r\n\r\n![Storybook](docs/images/storybook.png \"Storybook\")\r\n\r\n## 📦 Publishing to npm\r\n\r\n### Build the project\r\n\r\n```shell\r\nnpm run build\r\n```\r\n\r\n### Verify the build\r\n\r\n```shell\r\nnode dist/index.js\r\n```\r\n\r\n### Bump the version\r\n\r\nUpdate the version in the package.json, e.g., from 1.0.0 to 1.0.1, to create a new release:\r\n\r\n```shell\r\nnpm version patch\r\n```\r\n\r\nAlternatively:\r\n\r\n* Use `npm version minor` for new features.\r\n* Use `npm version major` for breaking changes.\r\n\r\n### Publish the package\r\n\r\n```shell\r\nnpm publish --access public\r\n```\r\n\r\n### Verify the publication\r\n\r\nCheck the package on npm: [https://www.npmjs.com/package/@ixnode/simple-clock](https://www.npmjs.com/package/@ixnode/simple-clock).\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.\r\n\r\n### Authors\r\n\r\n* Björn Hempel \u003cbjoern@hempel.li\u003e - _Initial work_ - [https://github.com/bjoern-hempel](https://github.com/bjoern-hempel)\r\n\r\n## 🌟 Contributing\r\n\r\nContributions are welcome! Feel free to submit issues or pull requests to improve this project.\r\n\r\n## 🤝 Acknowledgments\r\n\r\nSpecial thanks to the open-source community for providing amazing tools like React, TypeScript, and Storybook.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixnode%2Fnode-simple-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fixnode%2Fnode-simple-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixnode%2Fnode-simple-clock/lists"}