9 |
10 | ## Version 2.0.0 is out! 👋
11 |
12 | **New features:**
13 |
14 | - Use `import { CircularProgressbarWithChildren }` in order to [put arbitrary JSX inside the component](/README.md#adding-arbitrary-text-or-content-inside-the-progressbar).
15 | - Use `import { buildStyles }` to make it easier to [customize styles](/README.md#using-the-styles-prop).
16 | - Use `props.minValue` and `props.maxValue` to specify a range other than 0-100.
17 |
18 | **Breaking changes:** if you're upgrading from an older version, take a look at [UPGRADING.md](/UPGRADING.md) for instructions on how to migrate.
19 |
20 | Documentation for v1.x.x will still be available at [README_v1.md](/README_v1.md).
21 |
22 | ## Installation
23 |
24 | Install with yarn:
25 |
26 | ```bash
27 | yarn add react-circular-progressbar
28 | ```
29 |
30 | or npm:
31 |
32 | ```bash
33 | npm install --save react-circular-progressbar
34 | ```
35 |
36 | ## Usage
37 |
38 | Import the component and default styles:
39 |
40 | ```javascript
41 | import { CircularProgressbar } from 'react-circular-progressbar';
42 | import 'react-circular-progressbar/dist/styles.css';
43 | ```
44 |
45 | **Note**: Importing CSS requires a CSS loader (if you're using create-react-app, this is already set up for you). If you don't have a CSS loader, you can copy [styles.css](src/styles.css) into your project instead.
46 |
47 | Now you can use the component:
48 |
49 | ```jsx
50 | const percentage = 66;
51 |
52 |
67 |
69 | ```
70 |
71 | This makes the progressbar work well with responsive designs and grid systems.
72 |
73 |
74 | ## Props
75 |
76 | [**Take a look at the CodeSandbox**](https://codesandbox.io/s/vymm4oln6y) for interactive examples on how to use these props.
77 |
78 | ℹ️ Version 1.0.0 removed the `classForPercentage` and `textForPercentage` props in favor of `className` and `text` props. Version 2.0.0 replaces `percentage` with `value` and removes the `initialAnimation` prop. Take a look at [UPGRADING.md](/UPGRADING.md) for instructions on how to migrate.
79 |
80 | | Name | Description |
81 | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
82 | | `value` | Completion value of the progressbar, from `minValue` to `maxValue`. Required. |
83 | | `minValue` | Minimum value of the progressbar. Default: `0`. |
84 | | `maxValue` | Maximum value of the progressbar. Default: `100`. |
85 | | `className` | Classes to apply to the svg element. Default: `''`. |
86 | | `text` | Text to display inside progressbar. Default: `''`. |
87 | | `strokeWidth` | Width of circular line relative to total width of component, a value from 0-100. Default: `8`. |
88 | | `background` | Whether to display background color. Default: `false`. |
89 | | `backgroundPadding` | Padding between background circle and path/trail relative to total width of component. Only used if `background` is `true`. Default: `0`. |
90 | | `counterClockwise` | Whether to rotate progressbar in counterclockwise direction. Default: `false`. |
91 | | `circleRatio` | Number from 0-1 representing ratio of the full circle diameter the progressbar should use. Default: `1`. |
92 | | `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. |
93 | | `styles` | Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background). |
94 |
95 | ## Theming (customizing styles)
96 |
97 | Use CSS or inline styles to customize the styling - the default CSS is a good starting point, but you can override it as needed.
98 |
99 | #### Using the `styles` prop
100 |
101 | You can use the `styles` prop to customize each part of the progressbar (the root svg, path, trail, text, and background). This uses the native `style` prop for each subcomponent, so you can use any CSS properties here, not just the ones mentioned below.
102 |
103 | As a convenience, you can use `buildStyles` to configure the most common style changes:
104 |
105 | ```jsx
106 | import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
107 |
108 | const percentage = 66;
109 |
110 | 
225 |
226 | 66% mate
227 |
228 | 
232 |
233 | `CircularProgressbarWithChildren` has all the same props as `CircularProgressbar` - you can use it the exact same way otherwise.
234 |
235 | ## Animating text
236 |
237 | If you want to animate the text as well as the path, you'll need to transition the `value` prop from one value to another using a third-party animation library like `react-move` and an easing library like `d3-ease`.
238 |
239 | You can use a render prop wrapper like **[AnimatedProgressProvider.js inside this Codesandbox](https://codesandbox.io/s/vymm4oln6y)** to help manage the transitioning value, and use it like this:
240 |
241 | ```jsx
242 | import { easeQuadInOut } from 'd3-ease';
243 |
244 |