Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jonasdoesthings/react-activity-rings

Apple Watch inspired Activity Rings for React using SVGs
https://github.com/jonasdoesthings/react-activity-rings

activity-rings frontend hacktoberfest hacktoberfest-accepted react react-component react-components

Last synced: about 2 months ago
JSON representation

Apple Watch inspired Activity Rings for React using SVGs

Host: GitHub
URL: https://github.com/jonasdoesthings/react-activity-rings
Owner: JonasDoesThings
License: mit
Created: 2023-01-21T16:55:09.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-08-26T20:14:17.000Z (over 1 year ago)
Last Synced: 2024-11-07T16:50:20.498Z (2 months ago)
Topics: activity-rings, frontend, hacktoberfest, hacktoberfest-accepted, react, react-component, react-components
Language: TypeScript
Homepage: https://jonasdoesthings.github.io/react-activity-rings/
Size: 17.1 MB
Stars: 6
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # react-activity-rings

**Apple-inspired Activity Rings for React.**  

[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@jonasdoesthings/react-activity-rings?color=%2384cc16&style=flat-square)](https://bundlephobia.com/package/@jonasdoesthings/react-activity-rings)

[![LICENSE](https://img.shields.io/npm/l/@jonasdoesthings/react-activity-rings?color=%2384cc16&style=flat-square)](./LICENSE)

[![npm version](https://img.shields.io/npm/v/@jonasdoesthings/react-activity-rings?color=84cc16&style=flat-square)](https://www.npmjs.com/package/@jonasdoesthings/react-activity-rings/)

![demo banner gif](.assets/activityrings_banner.gif)

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

```tsx

import {ActivityRings} from "@jonasdoesthings/react-activity-rings";

// Basic example with no custom settings

```

```tsx

// Example with custom settings

```

More usage-examples can be found under [./src/components/ActivityRings.stories.tsx](./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](https://developer.mozilla.org/en-US/docs/Web/CSS/color) i.e. `#FF00FF` or `rgb(0, 255, 0)` |

### ActivityRingContainerOptions

| Property                | Type   | Default     | Description                                                                                                              |

|-------------------------|--------|-------------|--------------------------------------------------------------------------------------------------------------------------|

| containerHeight         | string | 100%        | A [css-compatible height value](https://developer.mozilla.org/en-US/docs/Web/CSS/height) of the container                |

| containerWidth          | string | 100%        | A [css-compatible width value](https://developer.mozilla.org/en-US/docs/Web/CSS/width) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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 `` 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](https://github.com/JonasDoesThings/react-activity-rings/issues/1)

## License

The project is licensed under the MIT license.    

Check the [LICENSE](./LICENSE) file, for the full legal-notice.