diff --git a/README.md b/README.md index d1ed5e6..4b3057b 100644 --- a/README.md +++ b/README.md @@ -4,23 +4,21 @@ [![Build Status](https://travis-ci.org/kevinsqi/react-circular-progressbar.svg?branch=master)](https://travis-ci.org/kevinsqi/react-circular-progressbar) [![Bundle size](https://img.shields.io/bundlephobia/min/react-circular-progressbar.svg)](https://bundlephobia.com/result?p=react-circular-progressbar) -animated progressbar progressbar examples - ---- - A circular progressbar component, built with SVG and extensively customizable. [**Try it out on CodeSandbox**](https://codesandbox.io/s/vymm4oln6y). -## 🎊 Version 2.0.0 +animated progressbar progressbar examples + +## Version 2.0.0 is out! 👋 **New features:** -- `import { CircularProgressbarWithChildren }` in order to [put arbitrary JSX inside the component](/README.md#adding-arbitrary-text-or-content-inside-the-progressbar). -- `import { buildStyles }` to make it easier to [customize styles](/README.md#using-the-styles-prop). +- Use `import { CircularProgressbarWithChildren }` in order to [put arbitrary JSX inside the component](/README.md#adding-arbitrary-text-or-content-inside-the-progressbar). +- Use `import { buildStyles }` to make it easier to [customize styles](/README.md#using-the-styles-prop). - Use `props.minValue` and `props.maxValue` to specify a range other than 0-100. **Breaking changes:** if you're upgrading from an older version, take a look at [UPGRADING.md](/UPGRADING.md) for instructions on how to migrate. -**v1 documentation** will still be available at [README_v1.md](/README_v1.md). +Documentation for v1.x.x will still be available at [README_v1.md](/README_v1.md). ## Installation diff --git a/README_v1.md b/README_v1.md index cb4f526..5cadfb2 100644 --- a/README_v1.md +++ b/README_v1.md @@ -43,29 +43,26 @@ Now you can use the component: ```jsx const percentage = 66; - +; ``` ## Props [**Take a look at the CodeSandbox**](https://codesandbox.io/s/vymm4oln6y) for interactive examples on how to use these props. -| Name | Description | -| ---- | ----------- | -| `percentage` | Numeric percentage to display, from 0-100. Required. | -| `className` | Classes to apply to the svg element. Default: `''`. | -| `text` | Text to display inside progressbar. Default: `null`. | -| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. | -| `background` | Whether to display background color. Default: `false`. | -| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `null`. | -| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. | -| `counterClockwise` | Toggle whether to rotate progressbar in counterclockwise direction. Default: `false`. | -| `circleRatio` | Number from 0-1 representing ratio of the full circle diameter the progressbar should use. Default: `1`. | -| `classes` | Object allowing overrides of classNames of each svg subcomponent (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/kevinsqi/react-circular-progressbar/pull/25) for more detail. | -| `styles` | Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background). | +| Name | Description | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `percentage` | Numeric percentage to display, from 0-100. Required. | +| `className` | Classes to apply to the svg element. Default: `''`. | +| `text` | Text to display inside progressbar. Default: `null`. | +| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. | +| `background` | Whether to display background color. Default: `false`. | +| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `null`. | +| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. | +| `counterClockwise` | Toggle whether to rotate progressbar in counterclockwise direction. Default: `false`. | +| `circleRatio` | Number from 0-1 representing ratio of the full circle diameter the progressbar should use. Default: `1`. | +| `classes` | Object allowing overrides of classNames of each svg subcomponent (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/kevinsqi/react-circular-progressbar/pull/25) for more detail. | +| `styles` | Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background). | Version 1.0.0 removed the `classForPercentage` and `textForPercentage` props in favor of the newer `className` and `text` props. Take a look at the [migration guide](/CHANGELOG.md) for instructions on how to migrate. @@ -128,10 +125,18 @@ import './custom.css'; ```css // custom.css -.CircularProgressbar-path { stroke: red; } -.CircularProgressbar-trail { stroke: gray; } -.CircularProgressbar-text { fill: yellow; } -.CircularProgressbar-background { fill: green; } +.CircularProgressbar-path { + stroke: red; +} +.CircularProgressbar-trail { + stroke: gray; +} +.CircularProgressbar-text { + fill: yellow; +} +.CircularProgressbar-background { + fill: green; +} ``` ## Customizing the text/content inside progressbar @@ -140,8 +145,6 @@ If you want to add images or multiple lines of text within the progressbar, the [**Here's a Codesandbox demo**](https://codesandbox.io/s/qlr7w0rm29) -custom content progressbar - ## Customizing animation and animating text You can adjust the animation characteristics using CSS or the `styles` prop: @@ -182,25 +185,22 @@ const needDominantBaselineFix = ... ## Advanced usage -* [Delaying the animation until the progressbar is visible](https://github.com/kevinsqi/react-circular-progressbar/issues/64) -* [Using a different value range than 0-100](https://codesandbox.io/s/6z64omwv3n) -* [Rotating the progressbar by some degree](https://github.com/kevinsqi/react-circular-progressbar/issues/38) -* [Applying a gradient to the progressbar](https://github.com/kevinsqi/react-circular-progressbar/issues/31#issuecomment-338216925) -* [Customizing the background](https://github.com/kevinsqi/react-circular-progressbar/issues/21#issuecomment-336613160) -* [Creating a countdown timer](https://github.com/kevinsqi/react-circular-progressbar/issues/52) -* [Creating a dashboard/speedometer style progressbar](https://github.com/kevinsqi/react-circular-progressbar/issues/49) - +- [Delaying the animation until the progressbar is visible](https://github.com/kevinsqi/react-circular-progressbar/issues/64) +- [Using a different value range than 0-100](https://codesandbox.io/s/6z64omwv3n) +- [Rotating the progressbar by some degree](https://github.com/kevinsqi/react-circular-progressbar/issues/38) +- [Applying a gradient to the progressbar](https://github.com/kevinsqi/react-circular-progressbar/issues/31#issuecomment-338216925) +- [Customizing the background](https://github.com/kevinsqi/react-circular-progressbar/issues/21#issuecomment-336613160) +- [Creating a countdown timer](https://github.com/kevinsqi/react-circular-progressbar/issues/52) +- [Creating a dashboard/speedometer style progressbar](https://github.com/kevinsqi/react-circular-progressbar/issues/49) ## Supported platforms react-circular-progressbar does not work with React Native, because React Native does not support `` out of the box. - ## Contributing Take a look at [CONTRIBUTING.md](/CONTRIBUTING.md) to see how to help contribute to react-circular-progressbar. - ## License [MIT](/LICENSE)