{"id":13788618,"url":"https://github.com/vishnuramana/analogclock","last_synced_at":"2025-05-12T03:30:36.594Z","repository":{"id":46820283,"uuid":"163170473","full_name":"vishnuramana/analogclock","owner":"vishnuramana","description":"🕰 A customizable analog clock built using React","archived":false,"fork":false,"pushed_at":"2021-10-24T16:48:46.000Z","size":2027,"stargazers_count":22,"open_issues_count":2,"forks_count":11,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2025-04-21T20:07:15.646Z","etag":null,"topics":["analog","analog-clock","clock","custom","customizable","hacktoberfest","learning-by-doing","react","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"http://vishnuramana.github.io/analogclock","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/vishnuramana.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}},"created_at":"2018-12-26T11:03:36.000Z","updated_at":"2025-04-10T10:39:41.000Z","dependencies_parsed_at":"2022-09-08T13:11:53.683Z","dependency_job_id":null,"html_url":"https://github.com/vishnuramana/analogclock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishnuramana%2Fanalogclock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishnuramana%2Fanalogclock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishnuramana%2Fanalogclock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishnuramana%2Fanalogclock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vishnuramana","download_url":"https://codeload.github.com/vishnuramana/analogclock/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253667930,"owners_count":21944941,"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":["analog","analog-clock","clock","custom","customizable","hacktoberfest","learning-by-doing","react","reactjs","styled-components"],"created_at":"2024-08-03T21:00:51.092Z","updated_at":"2025-05-12T03:30:36.081Z","avatar_url":"https://github.com/vishnuramana.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Analog Clock using React\n\n[![CircleCI](https://circleci.com/gh/vishnuramana/analogclock/tree/dev.svg?style=shield)](https://circleci.com/gh/vishnuramana/analogclock/tree/dev) [![Coverage Status](https://coveralls.io/repos/github/vishnuramana/analogclock/badge.svg?branch=dev\u0026kill_cache=1)](https://coveralls.io/github/vishnuramana/analogclock?branch=dev) [![npm](https://img.shields.io/npm/dw/analog-clock-react)](https://www.npmjs.com/package/analog-clock-react) ![npm](https://img.shields.io/npm/v/analog-clock-react) [![NPM](https://img.shields.io/npm/l/analog-clock-react)](https://github.com/vishnuramana/analogclock/blob/dev/LICENSE)\n\nThis is a customizable analog clock completely built using React. It is customizable by passing an options JSON Object to the component which allows you to modify the clock colors. It also allows you to use multiple timezones.\n\n![Clock Preview](https://i.imgur.com/uDyNlVl.png)\n\n## Demo\nYou can customize/view a live demo of the clock [here](http://vishnuramana.github.io/analogclock).\n\n## Installation\nInstall the package using\n\n    npm install --save analog-clock-react\n    \n## Usage\nImport the  `AnalogClock` component into your React Component like this\n\n    import AnalogClock from 'analog-clock-react';\n    \nThen use the `AnalogClock` Component like this\n\n    let options = {\n        width: \"300px\",\n        border: true,\n        borderColor: \"#2e2e2e\",\n        baseColor: \"#17a2b8\",\n        centerColor: \"#459cff\",\n        centerBorderColor: \"#ffffff\",\n        handColors: {\n          second: \"#d81c7a\",\n          minute: \"#ffffff\",\n          hour: \"#ffffff\"\n        }\n    };\n    .....\n    \u003cAnalogClock {...options} /\u003e\n\nYou can customize the clock using the different properties in the `options` JSON Object. \n\nPlease visit the [demo](http://vishnuramana.github.io/analogclock) page to get a live preview of the clock.\n\n## Features\n\n- ### Custom Time / Timezone Support\n    *AnalogClock* now supports using your own custom time/timezone. To enable custom time usage, set `useCustomTime` to `true` and set your own `hours`, `minutes` and `seconds`  in the `options` JSON Object like below:\n    \n        let options = {\n            useCustomTime: true,    // set this to true\n            width: \"300px\",\n            border: true,\n            borderColor: \"#2e2e2e\",\n            baseColor: \"#17a2b8\",\n            centerColor: \"#459cff\",\n            centerBorderColor: \"#ffffff\",\n            handColors: {\n              second: \"#d81c7a\",\n              minute: \"#ffffff\",\n              hour: \"#ffffff\"\n            },\n            \"seconds\": 1,   // set your\n            \"minutes\": 10,  // own\n            \"hours\": 22     // time here.\n        };\n\n    Once you do that, `AnalogClock` will expect you to give it the `hours`, `minutes` and `seconds` value.\n    \n    *Note: You will have to use a setInterval in the component where you use `\u003cAnalogClock\u003e` to update the `options` object with the time that you pass. An example is given below:*\n    \n      updateClock = () =\u003e {\n        let ausTime = new Date().toLocaleString(\"en-US\", { timeZone: \"Australia/Brisbane\" });\n        let date = new Date(ausTime);\n    \n        this.setState({\n          'options': {\n            ...this.state.options,\n            seconds: date.getSeconds(),\n            minutes: date.getMinutes(),\n            hours: date.getHours()\n          }\n        })\n      }\n      ....\n      this.interval = setInterval(this.updateClock, 1000);\n\n## Change Log\n  - **v1.3.0**\n    - Added finer movement of hour hand\n\n  - **v1.2.2**\n    - Fixed clock hand centering issues\n    - Removed unwanted code\n\n## Contribution\n\nIf you wish to contribute to this project, please use the `dev` branch to add your changes and test. Make sure all the tests are passed and optimal code coverage is present. Once you are done with your changes, please raise a PR.\n\n## Issues/Feature Requests\n\nFor any issues/feature-requests, you can create an issue in Github or email me at [me@vishnu.codes](mailto:me@vishnu.codes)\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvishnuramana%2Fanalogclock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvishnuramana%2Fanalogclock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvishnuramana%2Fanalogclock/lists"}