{"id":13850319,"url":"https://github.com/petecorreia/react-circular-input","last_synced_at":"2025-07-12T21:33:41.454Z","repository":{"id":34158555,"uuid":"161917856","full_name":"petecorreia/react-circular-input","owner":"petecorreia","description":"React components for easily composing a circular range input","archived":false,"fork":false,"pushed_at":"2023-07-31T19:15:59.000Z","size":4418,"stargazers_count":174,"open_issues_count":16,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T07:46:23.592Z","etag":null,"topics":["circular","gauge","hooks","knob","radial","react"],"latest_commit_sha":null,"homepage":"https://react-circular-input.now.sh","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/petecorreia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-12-15T15:27:29.000Z","updated_at":"2025-05-28T19:19:23.000Z","dependencies_parsed_at":"2024-01-13T17:12:06.707Z","dependency_job_id":"f9ed8cab-e8f6-4da7-97ce-c2c3e48446d9","html_url":"https://github.com/petecorreia/react-circular-input","commit_stats":{"total_commits":100,"total_committers":8,"mean_commits":12.5,"dds":0.24,"last_synced_commit":"2c8d4fffd62c5681f1d79105117ea714d5848384"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/petecorreia/react-circular-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petecorreia%2Freact-circular-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petecorreia%2Freact-circular-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petecorreia%2Freact-circular-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petecorreia%2Freact-circular-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/petecorreia","download_url":"https://codeload.github.com/petecorreia/react-circular-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petecorreia%2Freact-circular-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265059607,"owners_count":23705222,"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":["circular","gauge","hooks","knob","radial","react"],"created_at":"2024-08-04T20:01:06.043Z","updated_at":"2025-07-12T21:33:41.118Z","avatar_url":"https://github.com/petecorreia.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-circular-input\n\nReact components for easily composing a circular range input\n\n[![Latest Release][github-release]][npm]\n[![Downloads][downloads-badge]][npm]\n[![Version][version-badge]][npm]\n[![MIT License][license]](LICENSE.md)\n\n[npm]: https://npmjs.com/package/react-circular-input\n[downloads-badge]: https://flat.badgen.net/npm/dt/react-circular-input\n[version-badge]: https://flat.badgen.net/npm/v/react-circular-input\n[license]: https://flat.badgen.net/badge/license/MIT/blue\n[github-release]: https://flat.badgen.net/github/release/petecorreia/react-circular-input\n\n```sh\nnpm i react-circular-input\n```\n\n\u003ca href=\"https://react-circular-input.now.sh\"\u003e\u003cimg src=\"https://react-circular-input.now.sh/social-example.gif\" alt=\"Animated example image (GIF)\"\u003e\u003c/a\u003e\n\n## Example\n\n```tsx\nimport {\n\tCircularInput,\n\tCircularTrack,\n\tCircularProgress,\n\tCircularThumb\n} from 'react-circular-input'\n\nexport default () =\u003e {\n\tconst [value, setValue] = useState(0.25)\n\n\treturn (\n\t\t\u003cCircularInput value={value} onChange={setValue}\u003e\n\t\t\t\u003cCircularTrack /\u003e\n\t\t\t\u003cCircularProgress /\u003e\n\t\t\t\u003cCircularThumb /\u003e\n\t\t\u003c/CircularInput\u003e\n\t)\n}\n```\n\nThere's a lot more you can do with the library. From a simple gauge to a fully custom and animated circular input range.\n\nPlay around with **[examples at CodeSandbox](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)**:\n\n[![Edit react-circular-input](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)\n\nA declarative and composable approach means we have a lot of flexibility, check out the documentation for how to go further!\n\n## Documentation\n\nFull documentation at **[react-circular-input.now.sh](https://react-circular-input.now.sh)**.\n\n-   [Examples](https://react-circular-input.now.sh/examples)\n-   [Components](https://react-circular-input.now.sh/components)\n-   [Hooks](https://react-circular-input.now.sh/hooks)\n\nEnjoy! 🎉\n\n---\n\n[Contributing](CONTRIBUTING.md)\n|\n[Code of Conduct](CODE_OF_CONDUCT.md)\n|\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetecorreia%2Freact-circular-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpetecorreia%2Freact-circular-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetecorreia%2Freact-circular-input/lists"}