@jonasdoesthings/react-activity-rings v1.1.2
react-activity-rings
Apple-inspired Activity Rings for React.
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) |
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.