README tweaks

kevinsqi · May 13, 2019 · b94da8d · b94da8d
1 parent 46278d2
commit b94da8d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 41 deletions.
diff --git 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)
 
-<a href="https://codesandbox.io/s/vymm4oln6y"><img height="100" src="/demo/public/images/animated-progressbar.gif?raw=true" alt="animated progressbar" /></a> <a href="https://codesandbox.io/s/vymm4oln6y"><img height="100" src="/demo/public/images/circular-progressbar-examples.png?raw=true" alt="progressbar examples" /></a>
-
----
-
 A circular progressbar component, built with SVG and extensively customizable. [**Try it out on CodeSandbox**](https://codesandbox.io/s/vymm4oln6y).
 
-## 🎊 Version 2.0.0
+<a href="https://codesandbox.io/s/vymm4oln6y"><img height="100" src="/demo/public/images/animated-progressbar.gif?raw=true" alt="animated progressbar" /></a> <a href="https://codesandbox.io/s/vymm4oln6y"><img height="100" src="/demo/public/images/circular-progressbar-examples.png?raw=true" alt="progressbar examples" /></a>
+
+## 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
@@ -43,29 +43,26 @@ Now you can use the component:
 ```jsx
 const percentage = 66;
 
-<CircularProgressbar
-  percentage={percentage}
-  text={`${percentage}%`}
-/>
+<CircularProgressbar percentage={percentage} text={`${percentage}%`} />;
 ```
 
 ## 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)
 
-<a href="https://codesandbox.io/s/qlr7w0rm29"><img src="/demo/public/images/custom-content-progressbar.png?raw=true" alt="custom content progressbar" /></a>
-
 ## 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 `<svg>` 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)