diff --git a/README.md b/README.md index 341a607..3952b64 100644 --- a/README.md +++ b/README.md @@ -190,13 +190,25 @@ import './custom.css'; } ``` -## Customizing the text/content inside progressbar +## Adding arbitrary text or content inside the progressbar -If you want to add images or multiple lines of text within the progressbar, the suggested approach is to overlay it on top of a regular `` using absolute positioning - this gives you the ability to put arbitrary HTML content in there. You can create your own wrapper component to make this easy to work with. +If you want to add multiple lines of text or images within the progressbar, you can overlay it on top of a regular `` using absolute positioning. `react-circular-progressbar` ships with a `CircularProgressbarWithChildren` component which makes it easy to do that by using JSX children: -[**Here's a Codesandbox demo**](https://codesandbox.io/s/qlr7w0rm29) +```jsx +import { CircularProgressbarWithChildren } from 'react-circular-progressbar'; + + + {/* Put any JSX content in here that you'd like. It'll be vertically and horizonally centered. */} + doge +
+ 66% mate +
+
; +``` + +custom content progressbar -custom content progressbar +`CircularProgressbarWithChildren` has all the same props as `CircularProgressbar` - you can use it the exact same way otherwise. ## Animating text