react-activity-rings

Apple-inspired Activity Rings for React.

Support my Open Source work:

Installation

using npm:
npm install @jonasdoesthings/react-activity-rings
using yarn:
yarn add @jonasdoesthings/react-activity-rings

Examples

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.

API

ActivityRings

| Property | Type | Required | Description | |----------|------------------------------|----------|------------------------------------------------------| | rings | ActivityRing[] | yes | An array of ActivityRing objects containing the data | | options | ActivityRingContainerOptions | no | An object containing general settings |

ActivityRing

| 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 |

ActivityRingContainerOptions

| 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)

Notes

React Native

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

License

The project is licensed under the MIT license.
Check the LICENSE file, for the full legal-notice.