0
# Utility Components
1

2
Provider components and utility elements for theming, SSR support, loading states, layout utilities, and other miscellaneous functionality.
3

4
## Capabilities
5

6
### ThemeProvider
7

8
Provider for customizing Bootstrap theme configuration.
9

10
```typescript { .api }
11
/**
12
 * ThemeProvider component for Bootstrap theme configuration
13
 * @param prefixes - Custom CSS class prefixes for components
14
 * @param breakpoints - Responsive breakpoint configuration
15
 * @param minBreakpoint - Minimum breakpoint name
16
 * @param dir - Text direction for RTL support
17
 */
18
function ThemeProvider(props: ThemeProviderProps): JSX.Element;
19

20
interface ThemeProviderProps {
21
  /** Custom CSS class prefixes for components */
22
  prefixes?: Record<string, string>;
23
  /** Responsive breakpoint configuration */
24
  breakpoints?: string[];
25
  /** Minimum breakpoint name */
26
  minBreakpoint?: string;
27
  /** Text direction for RTL support */
28
  dir?: "ltr" | "rtl";
29
  /** Child components */
30
  children?: React.ReactNode;
31
}
32
```
33

34
**Usage Examples:**
35

36
```typescript
37
import { ThemeProvider, Button } from "react-bootstrap";
38

39
// Custom component prefixes
40
<ThemeProvider prefixes={{ btn: 'my-btn', card: 'my-card' }}>
41
  <App />
42
</ThemeProvider>
43

44
// RTL support
45
<ThemeProvider dir="rtl">
46
  <App />
47
</ThemeProvider>
48

49
// Custom breakpoints
50
<ThemeProvider 
51
  breakpoints={['xs', 'sm', 'md', 'lg', 'xl']}
52
  minBreakpoint="xs"
53
>
54
  <App />
55
</ThemeProvider>
56
```
57

58
### SSRProvider
59

60
Provider for server-side rendering compatibility.
61

62
```typescript { .api }
63
/**
64
 * SSRProvider component for server-side rendering support
65
 * @param children - Child components
66
 */
67
function SSRProvider(props: SSRProviderProps): JSX.Element;
68

69
interface SSRProviderProps {
70
  /** Child components */
71
  children?: React.ReactNode;
72
}
73
```
74

75
**Usage Examples:**
76

77
```typescript
78
import { SSRProvider } from "react-bootstrap";
79

80
// Wrap your app for SSR compatibility
81
<SSRProvider>
82
  <App />
83
</SSRProvider>
84
```
85

86
### Spinner
87

88
Loading spinner component with animation variants.
89

90
```typescript { .api }
91
/**
92
 * Spinner component for loading indicators
93
 * @param animation - Animation type
94
 * @param variant - Color variant
95
 * @param size - Size variant
96
 * @param role - ARIA role
97
 */
98
function Spinner(props: SpinnerProps): JSX.Element;
99

100
interface SpinnerProps extends React.HTMLAttributes<HTMLElement> {
101
  /** Animation type */
102
  animation?: "border" | "grow";
103
  /** Color variant */
104
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
105
  /** Size variant */
106
  size?: "sm";
107
  /** ARIA role for accessibility */
108
  role?: string;
109
  /** Component used for the root node */
110
  as?: React.ElementType;
111
  /** Bootstrap CSS class prefix */
112
  bsPrefix?: string;
113
}
114
```
115

116
**Usage Examples:**
117

118
```typescript
119
import { Spinner, Button } from "react-bootstrap";
120

121
// Basic border spinner
122
<Spinner animation="border" role="status">
123
  <span className="visually-hidden">Loading...</span>
124
</Spinner>
125

126
// Colored grow spinner
127
<Spinner animation="grow" variant="primary" />
128

129
// Small spinner in button
130
<Button variant="primary" disabled>
131
  <Spinner animation="border" size="sm" role="status" />
132
  <span className="visually-hidden">Loading...</span>
133
</Button>
134
```
135

136
### Placeholder
137

138
Placeholder components for loading states and skeleton screens.
139

140
```typescript { .api }
141
/**
142
 * Placeholder component for loading placeholders
143
 * @param animation - Animation type
144
 * @param bg - Background color variant
145
 * @param size - Size variant
146
 * @param xs,sm,md,lg,xl,xxl - Responsive width
147
 */
148
function Placeholder(props: PlaceholderProps): JSX.Element;
149

150
interface PlaceholderProps extends React.HTMLAttributes<HTMLElement> {
151
  /** Animation type */
152
  animation?: "glow" | "wave";
153
  /** Background color variant */
154
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
155
  /** Size variant */
156
  size?: "xs" | "sm" | "lg";
157
  /** Width at xs breakpoint */
158
  xs?: number;
159
  /** Width at sm breakpoint */
160
  sm?: number;
161
  /** Width at md breakpoint */
162
  md?: number;
163
  /** Width at lg breakpoint */
164
  lg?: number;
165
  /** Width at xl breakpoint */
166
  xl?: number;
167
  /** Width at xxl breakpoint */
168
  xxl?: number;
169
  /** Component used for the root node */
170
  as?: React.ElementType;
171
  /** Bootstrap CSS class prefix */
172
  bsPrefix?: string;
173
}
174
```
175

176
### PlaceholderButton
177

178
Button-styled placeholder component.
179

180
```typescript { .api }
181
/**
182
 * PlaceholderButton component for button placeholders
183
 * @param variant - Button variant style
184
 * @param size - Button size
185
 * @param xs,sm,md,lg,xl,xxl - Responsive width
186
 */
187
function PlaceholderButton(props: PlaceholderButtonProps): JSX.Element;
188

189
interface PlaceholderButtonProps extends React.HTMLAttributes<HTMLElement> {
190
  /** Button variant style */
191
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
192
  /** Button size */
193
  size?: "sm" | "lg";
194
  /** Width at xs breakpoint */
195
  xs?: number;
196
  /** Width at sm breakpoint */
197
  sm?: number;
198
  /** Width at md breakpoint */
199
  md?: number;
200
  /** Width at lg breakpoint */
201
  lg?: number;
202
  /** Width at xl breakpoint */
203
  xl?: number;
204
  /** Width at xxl breakpoint */
205
  xxl?: number;
206
  /** Component used for the root node */
207
  as?: React.ElementType;
208
  /** Bootstrap CSS class prefix */
209
  bsPrefix?: string;
210
}
211
```
212

213
**Placeholder Usage Examples:**
214

215
```typescript
216
import { Placeholder, PlaceholderButton, Card } from "react-bootstrap";
217

218
// Basic placeholders
219
<Placeholder xs={6} />
220
<Placeholder className="w-75" />
221

222
// Animated placeholders
223
<Placeholder animation="glow">
224
  <Placeholder xs={12} />
225
</Placeholder>
226

227
<Placeholder animation="wave">
228
  <Placeholder xs={12} />
229
</Placeholder>
230

231
// Colored placeholders
232
<Placeholder bg="primary" xs={4} />
233
<Placeholder bg="secondary" xs={6} />
234

235
// Different sizes
236
<Placeholder size="lg" xs={12} />
237
<Placeholder size="sm" xs={12} />
238
<Placeholder size="xs" xs={12} />
239

240
// Placeholder buttons
241
<PlaceholderButton variant="primary" xs={6} />
242
<PlaceholderButton variant="outline-secondary" xs={4} />
243

244
// Card with placeholders
245
<Card style={{ width: '18rem' }}>
246
  <Card.Img variant="top" src="..." />
247
  <Card.Body>
248
    <Placeholder animation="glow">
249
      <Placeholder xs={6} />
250
      <Placeholder className="w-75" />
251
      <Placeholder className="w-50" />
252
    </Placeholder>
253
    <PlaceholderButton variant="primary" xs={6} />
254
  </Card.Body>
255
</Card>
256
```
257

258
### Ratio
259

260
Aspect ratio container for responsive embedded content.
261

262
```typescript { .api }
263
/**
264
 * Ratio component for aspect ratio containers
265
 * @param aspectRatio - Aspect ratio preset or custom ratio
266
 */
267
function Ratio(props: RatioProps): JSX.Element;
268

269
interface RatioProps extends React.HTMLAttributes<HTMLDivElement> {
270
  /** Aspect ratio preset or custom ratio */
271
  aspectRatio?: "1x1" | "4x3" | "16x9" | "21x9" | string;
272
  /** Component used for the root node */
273
  as?: React.ElementType;
274
  /** Bootstrap CSS class prefix */
275
  bsPrefix?: string;
276
}
277
```
278

279
**Usage Examples:**
280

281
```typescript
282
import { Ratio } from "react-bootstrap";
283

284
// Standard video aspect ratio
285
<Ratio aspectRatio="16x9">
286
  <iframe src="https://www.youtube.com/embed/..." title="YouTube video"></iframe>
287
</Ratio>
288

289
// Square aspect ratio
290
<Ratio aspectRatio="1x1">
291
  <div>Square content</div>
292
</Ratio>
293

294
// Custom aspect ratio
295
<Ratio aspectRatio="2x1">
296
  <div>Custom ratio content</div>
297
</Ratio>
298
```
299

300
### CloseButton
301

302
Close button component for dismissible content.
303

304
```typescript { .api }
305
/**
306
 * CloseButton component for close buttons
307
 * @param variant - Visual variant
308
 * @param disabled - Disabled state
309
 * @param onClick - Click handler
310
 */
311
function CloseButton(props: CloseButtonProps): JSX.Element;
312

313
interface CloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
314
  /** Visual variant */
315
  variant?: "white";
316
  /** Disabled state */
317
  disabled?: boolean;
318
  /** Click handler */
319
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
320
  /** Bootstrap CSS class prefix */
321
  bsPrefix?: string;
322
}
323
```
324

325
**Usage Examples:**
326

327
```typescript
328
import { CloseButton, Alert } from "react-bootstrap";
329

330
// Basic close button
331
<CloseButton onClick={() => setShow(false)} />
332

333
// White variant for dark backgrounds
334
<CloseButton variant="white" onClick={() => setShow(false)} />
335

336
// Disabled close button
337
<CloseButton disabled />
338

339
// In alert context
340
<Alert variant="warning" dismissible>
341
  <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
342
  <p>Change this and that and try again.</p>
343
</Alert>
344
```
345

346
### Collapse
347

348
Collapsible content component with smooth transitions.
349

350
```typescript { .api }
351
/**
352
 * Collapse component for collapsible content
353
 * @param in - Show/hide state
354
 * @param mountOnEnter - Mount on enter transition
355
 * @param unmountOnExit - Unmount on exit transition
356
 * @param appear - Appear transition on mount
357
 * @param timeout - Transition timeout
358
 * @param dimension - Collapse dimension
359
 * @param getDimensionValue - Custom dimension calculation
360
 * @param onEnter - Enter transition callback
361
 * @param onEntering - Entering transition callback
362
 * @param onEntered - Entered transition callback
363
 * @param onExit - Exit transition callback
364
 * @param onExiting - Exiting transition callback
365
 * @param onExited - Exited transition callback
366
 */
367
function Collapse(props: CollapseProps): JSX.Element;
368

369
interface CollapseProps extends React.HTMLAttributes<HTMLElement> {
370
  /** Show/hide state */
371
  in?: boolean;
372
  /** Mount component on enter transition */
373
  mountOnEnter?: boolean;
374
  /** Unmount component on exit transition */
375
  unmountOnExit?: boolean;
376
  /** Appear transition on mount */
377
  appear?: boolean;
378
  /** Transition timeout in milliseconds */
379
  timeout?: number;
380
  /** Collapse dimension ('height' | 'width' | function) */
381
  dimension?: "height" | "width" | (() => "height" | "width");
382
  /** Custom dimension value calculation */
383
  getDimensionValue?: (dimension: string, element: HTMLElement) => number;
384
  /** Enter transition start callback */
385
  onEnter?: (element: HTMLElement) => void;
386
  /** Entering transition callback */
387
  onEntering?: (element: HTMLElement) => void;
388
  /** Entered transition end callback */
389
  onEntered?: (element: HTMLElement) => void;
390
  /** Exit transition start callback */
391
  onExit?: (element: HTMLElement) => void;
392
  /** Exiting transition callback */
393
  onExiting?: (element: HTMLElement) => void;
394
  /** Exited transition end callback */
395
  onExited?: (element: HTMLElement) => void;
396
  /** Component used for the root node */
397
  as?: React.ElementType;
398
  /** Bootstrap CSS class prefix */
399
  bsPrefix?: string;
400
}
401
```
402

403
### Fade
404

405
Fade transition component.
406

407
```typescript { .api }
408
/**
409
 * Fade component for fade transitions
410
 * @param in - Show/hide state
411
 * @param mountOnEnter - Mount on enter transition
412
 * @param unmountOnExit - Unmount on exit transition
413
 * @param appear - Appear transition on mount
414
 * @param timeout - Transition timeout
415
 * @param onEnter - Enter callback
416
 * @param onEntering - Entering callback
417
 * @param onEntered - Entered callback
418
 * @param onExit - Exit callback
419
 * @param onExiting - Exiting callback
420
 * @param onExited - Exited callback
421
 */
422
function Fade(props: FadeProps): JSX.Element;
423

424
interface FadeProps extends React.HTMLAttributes<HTMLElement> {
425
  /** Show/hide state */
426
  in?: boolean;
427
  /** Mount component on enter transition */
428
  mountOnEnter?: boolean;
429
  /** Unmount component on exit transition */
430
  unmountOnExit?: boolean;
431
  /** Appear transition on mount */
432
  appear?: boolean;
433
  /** Transition timeout in milliseconds */
434
  timeout?: number;
435
  /** Enter transition start callback */
436
  onEnter?: (element: HTMLElement, isAppearing: boolean) => void;
437
  /** Entering transition callback */
438
  onEntering?: (element: HTMLElement, isAppearing: boolean) => void;
439
  /** Entered transition end callback */
440
  onEntered?: (element: HTMLElement, isAppearing: boolean) => void;
441
  /** Exit transition start callback */
442
  onExit?: (element: HTMLElement) => void;
443
  /** Exiting transition callback */
444
  onExiting?: (element: HTMLElement) => void;
445
  /** Exited transition end callback */
446
  onExited?: (element: HTMLElement) => void;
447
  /** Component used for the root node */
448
  as?: React.ElementType;
449
  /** Bootstrap CSS class prefix */
450
  bsPrefix?: string;
451
}
452
```
453

454
### Image
455

456
Responsive image component with styling options.
457

458
```typescript { .api }
459
/**
460
 * Image component for responsive images
461
 * @param fluid - Responsive scaling
462
 * @param rounded - Rounded corners
463
 * @param roundedCircle - Circular shape
464
 * @param thumbnail - Thumbnail styling
465
 */
466
function Image(props: ImageProps): JSX.Element;
467

468
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
469
  /** Responsive fluid scaling */
470
  fluid?: boolean;
471
  /** Rounded corners */
472
  rounded?: boolean;
473
  /** Circular shape */
474
  roundedCircle?: boolean;
475
  /** Thumbnail styling with border */
476
  thumbnail?: boolean;
477
  /** Bootstrap CSS class prefix */
478
  bsPrefix?: string;
479
}
480
```
481

482
### Figure
483

484
Figure component for images with captions.
485

486
```typescript { .api }
487
/**
488
 * Figure component for figures with captions
489
 */
490
function Figure(props: FigureProps): JSX.Element;
491

492
interface FigureProps extends React.HTMLAttributes<HTMLElement> {
493
  /** Component used for the root node */
494
  as?: React.ElementType;
495
  /** Bootstrap CSS class prefix */
496
  bsPrefix?: string;
497
}
498
```
499

500
### FigureCaption
501

502
Caption component for figures.
503

504
```typescript { .api }
505
/**
506
 * FigureCaption component for figure captions
507
 */
508
function FigureCaption(props: FigureCaptionProps): JSX.Element;
509

510
interface FigureCaptionProps extends React.HTMLAttributes<HTMLElement> {
511
  /** Component used for the root node */
512
  as?: React.ElementType;
513
  /** Bootstrap CSS class prefix */
514
  bsPrefix?: string;
515
}
516
```
517

518
### FigureImage
519

520
Image component optimized for use within figures.
521

522
```typescript { .api }
523
/**
524
 * FigureImage component for figure images
525
 * @param fluid - Responsive scaling
526
 * @param rounded - Rounded corners
527
 * @param thumbnail - Thumbnail styling
528
 */
529
function FigureImage(props: FigureImageProps): JSX.Element;
530

531
interface FigureImageProps extends ImageProps {
532
  // Inherits all ImageProps
533
}
534
```
535

536
### Anchor
537

538
Styled anchor element component.
539

540
```typescript { .api }
541
/**
542
 * Anchor component for styled links
543
 */
544
function Anchor(props: AnchorProps): JSX.Element;
545

546
interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
547
  /** Component used for the root node */
548
  as?: React.ElementType;
549
  /** Bootstrap CSS class prefix */
550
  bsPrefix?: string;
551
}
552
```
553

554
## Figure Compound Components
555

556
Figure components support compound component patterns:
557

558
```typescript { .api }
559
// Compound component structure
560
Figure.Image = FigureImage;
561
Figure.Caption = FigureCaption;
562
```
563

564
**Figure Usage Examples:**
565

566
```typescript
567
import { Figure } from "react-bootstrap";
568

569
// Figure with image and caption
570
<Figure>
571
  <Figure.Image
572
    width={171}
573
    height={180}
574
    alt="171x180"
575
    src="holder.js/171x180"
576
  />
577
  <Figure.Caption>
578
    Nulla vitae elit libero, a pharetra augue mollis interdum.
579
  </Figure.Caption>
580
</Figure>
581

582
// Fluid responsive figure
583
<Figure>
584
  <Figure.Image
585
    fluid
586
    alt="Responsive image"
587
    src="image.jpg"
588
  />
589
  <Figure.Caption>
590
    A responsive figure with fluid image.
591
  </Figure.Caption>
592
</Figure>
593
```