{"id":21215271,"url":"https://github.com/jonasdoesthings/react-activity-rings","last_synced_at":"2025-07-10T11:31:17.820Z","repository":{"id":65403751,"uuid":"591721582","full_name":"JonasDoesThings/react-activity-rings","owner":"JonasDoesThings","description":"Apple Watch inspired Activity Rings for React using SVGs","archived":false,"fork":false,"pushed_at":"2023-08-26T20:14:17.000Z","size":17960,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-07T16:50:20.498Z","etag":null,"topics":["activity-rings","frontend","hacktoberfest","hacktoberfest-accepted","react","react-component","react-components"],"latest_commit_sha":null,"homepage":"https://jonasdoesthings.github.io/react-activity-rings/","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/JonasDoesThings.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":"2023-01-21T16:55:09.000Z","updated_at":"2024-06-12T18:44:06.000Z","dependencies_parsed_at":"2023-02-12T18:30:55.478Z","dependency_job_id":null,"html_url":"https://github.com/JonasDoesThings/react-activity-rings","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasDoesThings%2Freact-activity-rings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasDoesThings%2Freact-activity-rings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasDoesThings%2Freact-activity-rings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasDoesThings%2Freact-activity-rings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonasDoesThings","download_url":"https://codeload.github.com/JonasDoesThings/react-activity-rings/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225633993,"owners_count":17500075,"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":["activity-rings","frontend","hacktoberfest","hacktoberfest-accepted","react","react-component","react-components"],"created_at":"2024-11-20T21:36:12.230Z","updated_at":"2025-07-10T11:31:17.813Z","avatar_url":"https://github.com/JonasDoesThings.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/JonasDoesThings"],"categories":[],"sub_categories":[],"readme":"# react-activity-rings\n**Apple-inspired Activity Rings for React.**  \n\n[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@jonasdoesthings/react-activity-rings?color=%2384cc16\u0026style=flat-square)](https://bundlephobia.com/package/@jonasdoesthings/react-activity-rings)\n[![LICENSE](https://img.shields.io/npm/l/@jonasdoesthings/react-activity-rings?color=%2384cc16\u0026style=flat-square)](./LICENSE)\n[![npm version](https://img.shields.io/npm/v/@jonasdoesthings/react-activity-rings?color=84cc16\u0026style=flat-square)](https://www.npmjs.com/package/@jonasdoesthings/react-activity-rings/)\n\n\n![demo banner gif](.assets/activityrings_banner.gif)\n\nSupport my Open Source work:  \n\u003ca href=\"https://www.buymeacoffee.com/JonasDoesThings\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n\n## Installation\nusing npm:  \n`npm install @jonasdoesthings/react-activity-rings`  \nusing yarn:  \n`yarn add @jonasdoesthings/react-activity-rings`\n## Examples\nStorybook Demo: https://jonasdoesthings.github.io/react-activity-rings/\n\n```tsx\nimport {ActivityRings} from \"@jonasdoesthings/react-activity-rings\";\n\n// Basic example with no custom settings\n\u003cActivityRings rings={[\n  {filledPercentage: 0.5, color: '#fa0e5a'},\n  {filledPercentage: 0.75, color: '#afff02'},\n  {filledPercentage: 0.25, color: '#00fff8'},\n]} /\u003e\n```\n```tsx\n// Example with custom settings\n\u003cActivityRings \n  rings={[\n    {filledPercentage: 0.1, color: 'rgb(255, 0, 0)'},\n    {filledPercentage: 1, color: '#FF0000'},\n    {filledPercentage: 0.5, color: '#00fff8'},\n  ]} \n  options={{\n    initialRadius: 20,\n    animationDurationMillis: 1500,\n    containerHeight: '10vh',\n  }} \n/\u003e\n```\n\nMore usage-examples can be found under [./src/components/ActivityRings.stories.tsx](./src/components/ActivityRings.stories.tsx).\n\n## API\n### ActivityRings\n| Property | Type                         | Required | Description                                          |\n|----------|------------------------------|----------|------------------------------------------------------|\n| rings    | ActivityRing[]               | yes      | An array of ActivityRing objects containing the data |\n| options  | ActivityRingContainerOptions | no       | An object containing general settings                |\n\n### ActivityRing\n| Property         | Type   | Required | Description                                                                                                                                                               |\n|------------------|--------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| filledPercentage | number | yes      | A float between 0 and 1 representing the progress in percent                                                                                                              |\n| color            | string | yes      | A [css-compatible color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color) i.e. `#FF00FF` or `rgb(0, 255, 0)`                                                |\n| backgroundColor  | string | no       | A [css-compatible color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color) i.e. `#FF00FF` or `rgb(0, 255, 0)`. If not defined, the foreground color is used. |\n| ringWidth        | number | no       | A number in svg viewport-relative pixels specifying the stroke-width of the ring, if not defined, defaults to 12                                                          |\n\n### ActivityRingContainerOptions\n| Property                | Type   | Default     | Description                                                                                                              |\n|-------------------------|--------|-------------|--------------------------------------------------------------------------------------------------------------------------|\n| containerHeight         | string | 100%        | A [css-compatible height value](https://developer.mozilla.org/en-US/docs/Web/CSS/height) of the container                |\n| containerWidth          | string | 100%        | A [css-compatible width value](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the container                  |\n| paddingBetweenRings     | number | 0.75        | The padding between each of the rings                                                                                    |\n| initialRadius           | number | 30          | The radius of the innermost ring                                                                                         |\n| animationDurationMillis | number | 1000        | The duration of the initial animation in milliseconds (0=no animation)                                                   |\n| animationTimingFunction | string | ease-in-out | A [css-compatible animation timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) |\n| backgroundOpacity       | number | 0.4         | A float between 0 and 1 representing the opacity of the background-ring color in percent                                 |\n\n(All fields are optional)\n\n## Notes \n\n### React Native\nThis project currently does not work with react native when targeting other platforms than web, due to react native not supporting the used `\u003csvg\u003e` component and its descendents.\nIf you want to tackle this issue, feel free to fork this project and replace the web svg-component with a react-native supported one.  \nMore Details regarding RN support [can be found in this Issue](https://github.com/JonasDoesThings/react-activity-rings/issues/1)\n\n## License\nThe project is licensed under the MIT license.    \nCheck the [LICENSE](./LICENSE) file, for the full legal-notice.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonasdoesthings%2Freact-activity-rings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonasdoesthings%2Freact-activity-rings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonasdoesthings%2Freact-activity-rings/lists"}