diff --git a/README.md b/README.md index 5a06eb5..9214100 100644 --- a/README.md +++ b/README.md @@ -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