From f717fefae92531228d342f48e97fa9f1e3f55f81 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Fri, 13 Oct 2017 22:09:40 -0700 Subject: [PATCH] rename backgroundPadding, add docs, and reformat demo page --- README.md | 3 ++- docs/demo.jsx | 75 ++++++++++----------------------------------------- src/index.jsx | 6 ++--- 3 files changed, 19 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 28d6bec..966c82b 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,9 @@ import CircularProgressbar from 'react-circular-progressbar'; | Name | Description | | ---- | ----------- | | `percentage` | Numeric percentage to display, from 0-100. Required. | -| `strokeWidth` | Width of circular line. Default: `8`. | | `className` | Classes to apply to the svg element | +| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. | +| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `0`. | | `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. | | `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. | | `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. | diff --git a/docs/demo.jsx b/docs/demo.jsx index 1dfe78b..b01e418 100644 --- a/docs/demo.jsx +++ b/docs/demo.jsx @@ -6,20 +6,6 @@ console.log(`react-circular-progressbar v${COMPONENT_VERSION}`); const githubURL = 'https://github.com/iqnivek/react-circular-progressbar'; -const Config = ({ name, example, description, children }) => ( -
-
-

{name}{example ? `e.g. ${example}` : null}

-

{description}

-
-
- {children} -
-
-
-
-); - const Example = ({ description, children }) => (
@@ -60,7 +46,7 @@ class Demo extends React.Component { render() { return (
-
+

{COMPONENT_NAME}

@@ -69,7 +55,7 @@ class Demo extends React.Component {
-
+
-
-

Install with npm:

-

npm install {COMPONENT_NAME}

- View project on Github -
-
+

Styled with plain CSS.

+ @@ -119,42 +101,13 @@ class Demo extends React.Component {
-

Props

- - - - - - - - -
-
- View project on Github +
+

Installation

+
+

Install with npm:

+

npm install {COMPONENT_NAME}

+ View docs on Github +
); diff --git a/src/index.jsx b/src/index.jsx index aac57c6..6d8b1b5 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -58,7 +58,7 @@ class CircularProgressbar extends React.Component { getPathRadius() { // the radius of the path is defined to be in the middle, so in order for the path to // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth - return 50 - (this.props.strokeWidth / 2) - this.props.backgroundGutter; + return 50 - (this.props.strokeWidth / 2) - this.props.backgroundPadding; } render() { @@ -108,7 +108,7 @@ CircularProgressbar.propTypes = { percentage: PropTypes.number.isRequired, strokeWidth: PropTypes.number, className: PropTypes.string, - backgroundGutter: PropTypes.number, + backgroundPadding: PropTypes.number, initialAnimation: PropTypes.bool, classForPercentage: PropTypes.func, textForPercentage: PropTypes.func, @@ -117,7 +117,7 @@ CircularProgressbar.propTypes = { CircularProgressbar.defaultProps = { strokeWidth: 8, className: '', - backgroundGutter: 0, + backgroundPadding: 0, initialAnimation: false, textForPercentage: (percentage) => `${percentage}%`, };