Skip to content

Commit

Permalink
readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@rkyle35242
rkyle35242 committed Apr 30, 2024
1 parent e8bd214 commit 6625497
Showing 1 changed file with 21 additions and 20 deletions.
41 changes: 21 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,27 +110,28 @@ Try this example yourself [here](./example).

# 📖 Props

| Name | Type | Default | Description |
| --------------------------- | --------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| fillValue | number (0-100) | 0 | Current progress value |
| segments | Array of { scale: number, filledColor: string, emptyColor: string, data: object } | [] | Segments of the arc. Here, scale is a percentage value out of 100%, filledColor for filled part of a segment, and emptyColor is background color for an empty segment, data could be any object that you'd want to receive back for a segment. See example above. |
| filledArcWidth | number | 8 | Thickness of progress line |
| emptyArcWidth | number | 8 | Thickness of background line |
| spaceBetweenSegments | number | 2 | Space between segments |
| arcDegree | number | 180 | Degree of arc |
| radius | number | 100 | Arc radius |
| isAnimated | bool | true | Enable/disable progress animation |
| animationDuration | number | 1000 | Progress animation duration |
| animationDelay | number | 0 | Progress animation delay |
| ranges | Array of strings | [] | Arc ranges (segments) display values |
| rangesTextColor | string | '#000000' | Color of ranges text |
| rangesTextStyle | object | { fontSize: 12 } | Ranges text styling |
| showArcRanges | bool | false | Show/hide arc ranges |
| middleContentContainerStyle | object | {} | Extra styling for the middle content container |
| capInnerColor | string | '#28E037' | Cap's inner color |
| capOuterColor | string | '#FFFFFF' | Cap's outer color |
| children | function | | Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above. |
| Name | Type | Default | Description |
| --------------------------- | --------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| fillValue | number (0-100) | 0 | Current progress value |
| segments | Array of { scale: number, filledColor: string, emptyColor: string, data: object } | [] | Segments of the arc. Here, scale is a percentage value out of 100%, filledColor for filled part of a segment, and emptyColor is background color for an empty segment, data could be any object that you'd want to receive back for a segment. See example above. |
| filledArcWidth | number | 8 | Thickness of progress line |
| emptyArcWidth | number | 8 | Thickness of background line |
| spaceBetweenSegments | number | 2 | Space between segments |
| arcDegree | number | 180 | Degree of arc |
| radius | number | 100 | Arc radius |
| isAnimated | bool | true | Enable/disable progress animation |
| animationDuration | number | 1000 | Progress animation duration |
| animationDelay | number | 0 | Progress animation delay |
| ranges | Array of strings | [] | Arc ranges (segments) display values |
| rangesTextColor | string | '#000000' | Color of ranges text |
| rangesTextStyle | object | { fontSize: 12 } | Ranges text styling |
| showArcRanges | bool | false | Show/hide arc ranges |
| middleContentContainerStyle | object | {} | Extra styling for the middle content container |
| capInnerColor | string | '#28E037' | Cap's inner color |
| capOuterColor | string | '#FFFFFF' | Cap's outer color |
| children | function | | Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above. |
| |
| alignRangesWithSegments | bool | false | This might be useful when using segment[].arcDegreeScale values to customize the size of individual segments. If you'd like the range display to align with the edge of each segment, set this is `true`. Otherwise, range displays will be distributed evenly across the arc. |

## 📋 Attributions

Expand Down

0 comments on commit 6625497

Please sign in to comment.