{"id":17214942,"url":"https://github.com/pvoznyuk/react-live-clock","last_synced_at":"2025-05-15T16:06:36.790Z","repository":{"id":38310187,"uuid":"92839449","full_name":"pvoznyuk/react-live-clock","owner":"pvoznyuk","description":"React clock with time-zones","archived":false,"fork":false,"pushed_at":"2024-11-12T07:06:17.000Z","size":10598,"stargazers_count":156,"open_issues_count":3,"forks_count":25,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-04T22:37:02.242Z","etag":null,"topics":["clock","date","dateformat","react","time","time-zones"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/pvoznyuk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-05-30T14:07:28.000Z","updated_at":"2025-04-23T03:43:59.000Z","dependencies_parsed_at":"2024-06-18T13:49:32.639Z","dependency_job_id":"dc04aa61-5ad1-472e-aefb-4c932bf0654f","html_url":"https://github.com/pvoznyuk/react-live-clock","commit_stats":{"total_commits":338,"total_committers":13,"mean_commits":26.0,"dds":0.5266272189349113,"last_synced_commit":"987561decf56fab156267e051c7f1c9fac4bb66b"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvoznyuk%2Freact-live-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvoznyuk%2Freact-live-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvoznyuk%2Freact-live-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvoznyuk%2Freact-live-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pvoznyuk","download_url":"https://codeload.github.com/pvoznyuk/react-live-clock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374471,"owners_count":22060611,"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","date","dateformat","react","time","time-zones"],"created_at":"2024-10-15T03:22:38.802Z","updated_at":"2025-05-15T16:06:36.769Z","avatar_url":"https://github.com/pvoznyuk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-live-clock [![npm](https://img.shields.io/npm/v/react-live-clock.svg?style=flat-square)](https://www.npmjs.com/package/react-live-clock)\n\n[![Gitter](https://img.shields.io/gitter/room/pvoznyuk/help.svg?style=flat-square)](https://gitter.im/pvoznyuk/help)\n[![Dependencies](https://img.shields.io/david/pvoznyuk/react-live-clock.svg?style=flat-square)](https://david-dm.org/pvoznyuk/react-live-clock)\n[![Dev Dependencies](https://img.shields.io/david/dev/pvoznyuk/react-live-clock.svg?style=flat-square)](https://david-dm.org/pvoznyuk/react-live-clock#info=devDependencies)\n\nReact clock with time-zones\n[DEMO](https://pvoznyuk.github.io/react-live-clock/)\n\n## Installation\n\n### NPM\n```sh\nnpm install --save react react-live-clock\n```\n\nDon't forget to manually install peer dependencies (`react`) if you use npm@3.\n\n## Demo\n\n[http://pvoznyuk.github.io/react-live-clock](http://pvoznyuk.github.io/react-live-clock)\n\n\n## Usage\n```js\nimport React  from 'react';\nimport Clock from 'react-live-clock';\n\nexports default class MyComponent extends React.Component {\n    render() {\n        \u003cClock format={'HH:mm:ss'} ticking={true} timezone={'US/Pacific'} /\u003e\n    }\n}\n```\n\nOutputs:\n\n```html\n\u003ctime\u003e10:15:34\u003c/time\u003e\n```\n\n ** Shows current time for 'US/Pacific' timezone and updates every second\n\n### React Native\n\nReact Native requires that you wrap text in a ```\u003cText\u003e``` like this:\n```JSX\nimport { Text, View } from \"react-native\";\nimport Clock from \"react-live-clock\";\n\nexport default function ClockPage() {\n  return (\n    \u003cView\u003e\n      \u003cText\u003eClock page\u003c/Text\u003e\n      \u003cClock element={Text} /\u003e\n    \u003c/View\u003e\n  );\n}\n```\nIf you don't you will get the error ```Invariant Violation: Text strings must be rendered within a \u003cText\u003e component.```\n\n\n\n### Formatting\n\nyou can use any formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) date library\n\n### Properties\n\n| Property  | Type                | Default Value | Description |\n|------------|---------------------|---------------|-------------|\n| `date`     | timestamp or string | current date | Date to output, If nothing is set then it take current date. |\n| `format`   | string              | 'HH:MM'       | Formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) library.\n| `locale`   | string              | null          | Changes the language of the component via prop\n| `filter`   | function            | (date: String) =\u003e date      | Filtering the value before the output .\n| `timezone` | string              | null          | If timezone is set, the date is show in this timezone. You can find the list. [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones), the TZ column.\n| `ticking`  | boolean             | false         | If you want the clock to be auto-updated every `interval` seconds.\n| `blinking` | boolean, string     | false         | If you want the clock's last colon to blink. Set it to `all` to make them all blink.\n| `noSsr`    | boolean             | false         | Makes the component not render on the server to fix mismatch.\n| `interval` | integer             | 1000          | Auto-updating period for the clock. 1 second is a default value.\n| `className`| string              | null          | Extra class.\n| `style`    | CSSProperties       | null          | CSSProperties Customized inline style .\n| `children` | string              | null          | `date` can be set as a children prop.\n| `onChange` | function            | ({output, previousOutput, moment}) =\u003e {}         | callback function on each output update\n\n## Development and testing\n\nCurrently is being developed and tested with the latest stable `Node 7` on `OSX` and `Windows`.\n\nTo run example covering all `ReactLiveClock` features, use `npm start dev`, which will compile `src/example/Example.js`\n\n```bash\ngit clone git@github.com:pvoznyuk/react-live-clock.git\ncd react-live-clock\nnpm install\nnpm start dev\n\n# then\nopen http://localhost:8080\n```\n\n## Tests\n\n```bash\n# to run tests\nnpm start test\n\n# to generate test coverage (./reports/coverage)\nnpm start test.cov\n\n# to run end-to-end tests\nnpm start test.e2e\n```\n\n### License\nThis software is released under the MIT license. See LICENSE for more details.\n\n### Contributors\n\n* [pvoznyuk](https://github.com/pvoznyuk)\n* [anthony0030](https://github.com/anthony0030)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvoznyuk%2Freact-live-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpvoznyuk%2Freact-live-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvoznyuk%2Freact-live-clock/lists"}