0
# Content Integration
1

2
The CircularProgressbarWithChildren component enables placing arbitrary JSX content inside the progressbar with automatic centering and responsive sizing.
3

4
## Capabilities
5

6
### CircularProgressbarWithChildren Component
7

8
Wrapper component that combines a circular progressbar with arbitrary content placement inside the circle.
9

10
```typescript { .api }
11
/**
12
 * Wrapper component allowing arbitrary JSX content inside the progressbar
13
 * @param props - Component props including all progressbar options plus children
14
 * @returns React component with progressbar and centered content
15
 */
16
function CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps): React.ReactElement;
17

18
interface CircularProgressbarWithChildrenProps extends CircularProgressbarWrapperProps {
19
  /** Content to display inside the progressbar */
20
  children?: React.ReactNode;
21
}
22

23
interface CircularProgressbarWrapperProps {
24
  /** Current progress value (required) */
25
  value: number;
26
  /** Whether to display background circle */
27
  background?: boolean;
28
  /** Padding between background and path relative to total width */
29
  backgroundPadding?: number;
30
  /** Ratio of full circle diameter to use (0-1) */
31
  circleRatio?: number;
32
  /** CSS class names for SVG subcomponents */
33
  classes?: {
34
    root: string;
35
    trail: string;
36
    path: string;
37
    text: string;
38
    background: string;
39
  };
40
  /** CSS classes to apply to the SVG element */
41
  className?: string;
42
  /** Whether to rotate progressbar counterclockwise */
43
  counterClockwise?: boolean;
44
  /** Maximum value for progress range */
45
  maxValue?: number;
46
  /** Minimum value for progress range */
47
  minValue?: number;
48
  /** Width of circular line relative to total width (0-100) */
49
  strokeWidth?: number;
50
  /** Inline styles for SVG subcomponents */
51
  styles?: CircularProgressbarStyles;
52
  /** Text to display inside the progressbar (note: typically omitted when using children) */
53
  text?: string;
54
}
55
```
56

57
**Usage Examples:**
58

59
```tsx
60
import React from 'react';
61
import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
62
import 'react-circular-progressbar/dist/styles.css';
63

64
// Simple text content
65
function SimpleText() {
66
  return (
67
    <div style={{ width: 200, height: 200 }}>
68
      <CircularProgressbarWithChildren value={75}>
69
        <div style={{ fontSize: 16, fontWeight: 'bold' }}>
70
          75%
71
        </div>
72
      </CircularProgressbarWithChildren>
73
    </div>
74
  );
75
}
76

77
// Multi-line content
78
function MultiLineContent() {
79
  return (
80
    <div style={{ width: 150, height: 150 }}>
81
      <CircularProgressbarWithChildren value={88}>
82
        <div style={{ textAlign: 'center' }}>
83
          <div style={{ fontSize: 18, fontWeight: 'bold' }}>88%</div>
84
          <div style={{ fontSize: 12, color: '#666' }}>Complete</div>
85
        </div>
86
      </CircularProgressbarWithChildren>
87
    </div>
88
  );
89
}
90

91
// Custom content with icons
92
function WithIcon() {
93
  return (
94
    <div style={{ width: 100, height: 100 }}>
95
      <CircularProgressbarWithChildren value={100}>
96
        <div style={{ textAlign: 'center' }}>
97
          <div>✓</div>
98
          <div style={{ fontSize: 12 }}>Done</div>
99
        </div>
100
      </CircularProgressbarWithChildren>
101
    </div>
102
  );
103
}
104

105
// Interactive content
106
function InteractiveContent() {
107
  const [value, setValue] = React.useState(50);
108
  
109
  return (
110
    <div style={{ width: 200, height: 200 }}>
111
      <CircularProgressbarWithChildren value={value}>
112
        <div style={{ textAlign: 'center' }}>
113
          <div style={{ fontSize: 16, marginBottom: 8 }}>
114
            {value}%
115
          </div>
116
          <button 
117
            onClick={() => setValue(v => Math.min(100, v + 10))}
118
            style={{ fontSize: 12, padding: '4px 8px' }}
119
          >
120
            +10
121
          </button>
122
        </div>
123
      </CircularProgressbarWithChildren>
124
    </div>
125
  );
126
}
127

128
// With image content
129
function WithImage() {
130
  return (
131
    <div style={{ width: 120, height: 120 }}>
132
      <CircularProgressbarWithChildren 
133
        value={60}
134
        styles={{
135
          path: { stroke: '#3e98c7' },
136
          trail: { stroke: '#d6d6d6' }
137
        }}
138
      >
139
        <img 
140
          src="/avatar.jpg" 
141
          alt="User avatar"
142
          style={{ 
143
            width: 60, 
144
            height: 60, 
145
            borderRadius: '50%',
146
            objectFit: 'cover'
147
          }} 
148
        />
149
      </CircularProgressbarWithChildren>
150
    </div>
151
  );
152
}
153
```
154

155
### Content Positioning
156

157
The children content is automatically positioned using flexbox centering within the progressbar bounds.
158

159
```typescript { .api }
160
/**
161
 * Content positioning system for children elements
162
 * - Children are absolutely positioned within the progressbar
163
 * - Automatic vertical and horizontal centering using flexbox
164
 * - Full width and height available for content layout
165
 * - Responsive sizing that adapts to progressbar dimensions
166
 */
167
interface ContentPositioning {
168
  /** Container uses position: absolute with full dimensions */
169
  container: {
170
    position: 'absolute';
171
    width: '100%';
172
    height: '100%';
173
    marginTop: '-100%';
174
    display: 'flex';
175
    flexDirection: 'column';
176
    justifyContent: 'center';
177
    alignItems: 'center';
178
  };
179
}
180
```
181

182
**Layout Considerations:**
183

184
```tsx
185
// Content sizing best practices
186
function ResponsiveContent() {
187
  return (
188
    <div style={{ width: '300px', height: '300px' }}>
189
      <CircularProgressbarWithChildren value={70}>
190
        {/* Content should be sized relative to container */}
191
        <div style={{ 
192
          width: '80%',  // Relative to progressbar size
193
          textAlign: 'center',
194
          padding: '10px'
195
        }}>
196
          <h3 style={{ margin: 0, fontSize: '1.2em' }}>Progress</h3>
197
          <p style={{ margin: '5px 0 0 0', fontSize: '0.9em' }}>
198
            70% Complete
199
          </p>
200
        </div>
201
      </CircularProgressbarWithChildren>
202
    </div>
203
  );
204
}
205

206
// Complex nested content
207
function ComplexContent() {
208
  return (
209
    <div style={{ width: 250, height: 250 }}>
210
      <CircularProgressbarWithChildren 
211
        value={85}
212
        strokeWidth={6}
213
        styles={{
214
          path: { stroke: '#4ade80' },
215
          trail: { stroke: '#e5e7eb' }
216
        }}
217
      >
218
        <div style={{ 
219
          display: 'flex', 
220
          flexDirection: 'column', 
221
          alignItems: 'center',
222
          gap: '8px'
223
        }}>
224
          <div style={{ 
225
            width: 40, 
226
            height: 40, 
227
            backgroundColor: '#4ade80',
228
            borderRadius: '50%',
229
            display: 'flex',
230
            alignItems: 'center',
231
            justifyContent: 'center',
232
            color: 'white',
233
            fontSize: 18,
234
            fontWeight: 'bold'
235
          }}>
236
            85
237
          </div>
238
          <div style={{ fontSize: 14, color: '#666' }}>
239
            Tasks Complete
240
          </div>
241
        </div>
242
      </CircularProgressbarWithChildren>
243
    </div>
244
  );
245
}
246
```
247

248
### Children Content Styling
249

250
Content inside the progressbar can be styled normally using CSS or inline styles.
251

252
**Styling Guidelines:**
253

254
```tsx
255
// Typography and spacing recommendations
256
function StyledChildren() {
257
  return (
258
    <div style={{ width: 180, height: 180 }}>
259
      <CircularProgressbarWithChildren value={92}>
260
        <div style={{
261
          // Center content and control text flow
262
          textAlign: 'center',
263
          // Use relative units for responsive sizing
264
          fontSize: 'clamp(12px, 4vw, 18px)',
265
          // Constrain content width to prevent overflow
266
          maxWidth: '70%',
267
          // Add padding for breathing room
268
          padding: '8px',
269
          // Control line spacing
270
          lineHeight: 1.2
271
        }}>
272
          <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
273
            92%
274
          </div>
275
          <div style={{ fontSize: '0.8em', opacity: 0.7 }}>
276
            Upload Progress
277
          </div>
278
        </div>
279
      </CircularProgressbarWithChildren>
280
    </div>
281
  );
282
}
283
```