Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/creewick/activity-rings

Last synced: 3 days ago
JSON representation

Host: GitHub
URL: https://github.com/creewick/activity-rings
Owner: creewick
Created: 2024-01-27T09:37:28.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-01-28T08:47:45.000Z (10 months ago)
Last Synced: 2024-01-28T12:37:15.007Z (10 months ago)
Language: TypeScript
Size: 4.5 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # activity-rings



  Apple-style Activity Rings for React





  Rendered as SVG, animated with react-spring





  



## Usage

### Example

```ts

```

### Props

#### ActivityRingsProps

| Property  | Type                | Required | Default | Description                |

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

| rings     | ActivityRingProps[] | yes      |         | Array describing each ring |

| width     | number \| string    | no       | 440px   | Size of resulting SVG      |

| ringWidth | number              | no       | 10      | Thickness of each ring, in SVG viewport units |

| animated  | boolean             | no       | true    | Should SVG animate on rings value changes |

#### ActivityRingProps

| Property | Type   | Required | Default              | Description            |

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

| value    | number | yes      |                      | Value of the ring in percents, where 1 means full circle |

| color    | string | no       | see DefaultColors.ts | Main color of the ring |