mirror of
https://github.com/kevinsqi/react-circular-progressbar.git
synced 2026-01-25 16:03:15 +00:00
update changelog/readme with migration guide
This commit is contained in:
parent
e2f04b75bf
commit
1fa16896aa
59
CHANGELOG.md
59
CHANGELOG.md
@ -1,3 +1,62 @@
|
||||
## 1.0.0
|
||||
|
||||
We're at 1.0.0! 🎉 Thank you to all the contributors and issue creators.
|
||||
|
||||
The main breaking change is the replacement of the `classForPercentage` prop with `className`, and the `textForPercentage` prop with `text` [#61].
|
||||
|
||||
**How to migrate**:
|
||||
|
||||
Previously, the text would by default display as "{yourPercentage}%". With 1.0, if you want to display that text, you need to supply the `text` prop explicitly:
|
||||
|
||||
```jsx
|
||||
const percentage = 60;
|
||||
|
||||
<CircularProgressbar
|
||||
percentage={percentage}
|
||||
text={`${percentage}%`}
|
||||
/>
|
||||
```
|
||||
|
||||
If you had customized either `classForPercentage` or `textForPercentage` functions before 1.0, you can reuse the same function for `className` and `text`.
|
||||
|
||||
So if your pre-1.0 usage looked like this:
|
||||
|
||||
```jsx
|
||||
function customClassForPercentage(percentage) {
|
||||
if (percentage < 50) {
|
||||
return 'red';
|
||||
} else {
|
||||
return 'blue';
|
||||
}
|
||||
}
|
||||
|
||||
function customTextForPercentage(percentage) {
|
||||
if (percentage === 100) {
|
||||
return `${percentage}!!!`;
|
||||
} else {
|
||||
return `${percentage}%`;
|
||||
}
|
||||
}
|
||||
|
||||
const percentage = 60;
|
||||
|
||||
<CircularProgressbar
|
||||
percentage={percentage}
|
||||
classForPercentage={customClassForPercentage}
|
||||
textForPercentage={customTextForPercentage}
|
||||
/>
|
||||
```
|
||||
|
||||
...you can make a small change to make it work in 1.0:
|
||||
|
||||
```jsx
|
||||
<CircularProgressbar
|
||||
percentage={percentage}
|
||||
className={customClassForPercentage()}
|
||||
text={customTextForPercentage()}
|
||||
/>
|
||||
```
|
||||
|
||||
## 0.8.1
|
||||
|
||||
* Use styles.root style hook properly [#60]
|
||||
|
||||
@ -68,6 +68,7 @@ const percentage = 66;
|
||||
| `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/iqnivek/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.
|
||||
|
||||
## Customizing styles
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user