Apple-inspired Activity Rings for React.
Support my Open Source work:
using npm:
npm install @jonasdoesthings/react-activity-rings
using yarn:
yarn add @jonasdoesthings/react-activity-rings
Storybook Demo: https://jonasdoesthings.github.io/react-activity-rings/
import {ActivityRings} from "@jonasdoesthings/react-activity-rings";
// Basic example with no custom settings
<ActivityRings rings={[
{filledPercentage: 0.5, color: '#fa0e5a'},
{filledPercentage: 0.75, color: '#afff02'},
{filledPercentage: 0.25, color: '#00fff8'},
]} />// Example with custom settings
<ActivityRings
rings={[
{filledPercentage: 0.1, color: 'rgb(255, 0, 0)'},
{filledPercentage: 1, color: '#FF0000'},
{filledPercentage: 0.5, color: '#00fff8'},
]}
options={{
initialRadius: 20,
animationDurationMillis: 1500,
containerHeight: '10vh',
}}
/>More usage-examples can be found under ./src/components/ActivityRings.stories.tsx.
| Property | Type | Required | Description |
|---|---|---|---|
| rings | ActivityRing[] | yes | An array of ActivityRing objects containing the data |
| options | ActivityRingContainerOptions | no | An object containing general settings |
| Property | Type | Required | Description |
|---|---|---|---|
| filledPercentage | number | yes | A float between 0 and 1 representing the progress in percent |
| color | string | yes | A css-compatible color string i.e. #FF00FF or rgb(0, 255, 0) |
| backgroundColor | string | no | A css-compatible color string i.e. #FF00FF or rgb(0, 255, 0). If not defined, the foreground color is used. |
| ringWidth | number | no | A number in svg viewport-relative pixels specifying the stroke-width of the ring, if not defined, defaults to 12 |
| Property | Type | Default | Description |
|---|---|---|---|
| containerHeight | string | 100% | A css-compatible height value of the container |
| containerWidth | string | 100% | A css-compatible width value of the container |
| paddingBetweenRings | number | 0.75 | The padding between each of the rings |
| initialRadius | number | 30 | The radius of the innermost ring |
| animationDurationMillis | number | 1000 | The duration of the initial animation in milliseconds (0=no animation) |
| animationTimingFunction | string | ease-in-out | A css-compatible animation timing function |
| backgroundOpacity | number | 0.4 | A float between 0 and 1 representing the opacity of the background-ring color in percent |
(All fields are optional)
This project currently does not work with react native when targeting other platforms than web, due to react native not supporting the used <svg> component and its descendents.
If you want to tackle this issue, feel free to fork this project and replace the web svg-component with a react-native supported one.
More Details regarding RN support can be found in this Issue
The project is licensed under the MIT license.
Check the LICENSE file, for the full legal-notice.