0
# Reactstrap
1

2
Reactstrap is a comprehensive React component library providing stateless Bootstrap 5 components for React applications. It offers a complete set of React components that wrap Bootstrap's CSS classes and functionality, including navigation, layout, forms, feedback elements, and interactive components. The library is designed for maximum reusability across React applications requiring Bootstrap styling.
3

4
## Package Information
5

6
- **Package Name**: reactstrap
7
- **Package Type**: npm
8
- **Language**: JavaScript (React/JSX)
9
- **Installation**: `npm install reactstrap bootstrap`
10
- **Bootstrap Version**: Bootstrap 5
11
- **React Version**: >=16.8.0
12

13
## Core Imports
14

15
ESM (Recommended):
16

17
```javascript
18
import { Button, Alert, Container, Row, Col } from 'reactstrap';
19
```
20

21
CommonJS:
22

23
```javascript
24
const { Button, Alert, Container, Row, Col } = require('reactstrap');
25
```
26

27
Named imports for specific components:
28

29
```javascript
30
import Button from 'reactstrap/lib/Button';
31
import Alert from 'reactstrap/lib/Alert';
32
```
33

34
## Basic Usage
35

36
```jsx
37
import React from 'react';
38
import { Button, Alert, Container, Row, Col } from 'reactstrap';
39
import 'bootstrap/dist/css/bootstrap.min.css';
40

41
function App() {
42
  return (
43
    <Container>
44
      <Row>
45
        <Col>
46
          <Alert color="success">
47
            Welcome to Reactstrap!
48
          </Alert>
49
          <Button color="primary" size="lg">
50
            Click me
51
          </Button>
52
        </Col>
53
      </Row>
54
    </Container>
55
  );
56
}
57
```
58

59
## Architecture
60

61
Reactstrap components are organized into several categories:
62

63
- **Layout System**: Bootstrap's grid system and container components
64
- **Navigation**: Navbar, breadcrumbs, and navigation components  
65
- **Forms**: Input elements, form groups, and validation components
66
- **UI Components**: Buttons, cards, badges, and display elements
67
- **Interactive Elements**: Modals, dropdowns, tooltips, and collapse components
68
- **Feedback Systems**: Alerts, toasts, and progress indicators
69
- **Data Display**: Tables, lists, and pagination components
70

71
All components:
72
- Accept standard HTML attributes via props spreading
73
- Support CSS Modules through `cssModule` prop
74
- Use `tag` prop for custom element rendering
75
- Include TypeScript definitions
76
- Forward refs through `innerRef` prop
77

78
## Capabilities
79

80
### Layout Components
81

82
Bootstrap's responsive grid system and container components for structuring page layouts.
83

84
```javascript { .api }
85
// Container component for responsive layouts
86
function Container(props: {
87
  fluid?: boolean | string;
88
  tag?: React.ElementType;
89
  className?: string;
90
  cssModule?: object;
91
  children?: React.ReactNode;
92
}): JSX.Element;
93

94
// Grid row component
95
function Row(props: {
96
  noGutters?: boolean;
97
  form?: boolean;
98
  tag?: React.ElementType;
99
  className?: string;
100
  cssModule?: object;
101
  children?: React.ReactNode;
102
}): JSX.Element;
103

104
// Grid column component
105
function Col(props: {
106
  xs?: string | number | boolean | object;
107
  sm?: string | number | boolean | object;
108
  md?: string | number | boolean | object;
109
  lg?: string | number | boolean | object;
110
  xl?: string | number | boolean | object;
111
  xxl?: string | number | boolean | object;
112
  tag?: React.ElementType;
113
  className?: string;
114
  cssModule?: object;
115
  children?: React.ReactNode;
116
}): JSX.Element;
117
```
118

119
[Layout Components](./layout.md)
120

121
### Navigation Components
122

123
Navigation bars, breadcrumbs, and navigation list components for site navigation.
124

125
```javascript { .api }
126
// Bootstrap navigation bar
127
function Navbar(props: {
128
  light?: boolean;
129
  dark?: boolean;
130
  fixed?: string;
131
  sticky?: string;
132
  color?: string;
133
  expand?: boolean | string;
134
  tag?: React.ElementType;
135
  className?: string;
136
  cssModule?: object;
137
  children?: React.ReactNode;
138
}): JSX.Element;
139

140
// Navigation list component
141
function Nav(props: {
142
  tabs?: boolean;
143
  pills?: boolean;
144
  vertical?: boolean | string;
145
  horizontal?: string;
146
  justified?: boolean;
147
  fill?: boolean;
148
  navbar?: boolean;
149
  card?: boolean;
150
  tag?: React.ElementType;
151
  className?: string;
152
  cssModule?: object;
153
  children?: React.ReactNode;
154
}): JSX.Element;
155
```
156

157
[Navigation Components](./navigation.md)
158

159
### Button Components
160

161
Button elements including individual buttons, button groups, and dropdown buttons.
162

163
```javascript { .api }
164
// Bootstrap button component
165
function Button(props: {
166
  active?: boolean;
167
  'aria-label'?: string;
168
  block?: boolean;
169
  color?: string;
170
  disabled?: boolean;
171
  outline?: boolean;
172
  size?: string;
173
  tag?: React.ElementType;
174
  innerRef?: React.Ref;
175
  close?: boolean;
176
  onClick?: (event: React.MouseEvent) => void;
177
  className?: string;
178
  cssModule?: object;
179
  children?: React.ReactNode;
180
}): JSX.Element;
181

182
// Button group container
183
function ButtonGroup(props: {
184
  size?: string;
185
  vertical?: boolean;
186
  tag?: React.ElementType;
187
  role?: string;
188
  className?: string;
189
  cssModule?: object;
190
  children?: React.ReactNode;
191
}): JSX.Element;
192
```
193

194
[Button Components](./buttons.md)
195

196
### Form Components
197

198
Form elements including inputs, labels, form groups, and validation components.
199

200
```javascript { .api }
201
// Form input component
202
function Input(props: {
203
  type?: string;
204
  size?: string;
205
  bsSize?: string;
206
  state?: string;
207
  valid?: boolean;
208
  invalid?: boolean;
209
  tag?: React.ElementType;
210
  innerRef?: React.Ref;
211
  plaintext?: boolean;
212
  addon?: boolean;
213
  className?: string;
214
  cssModule?: object;
215
  [key: string]: any;
216
}): JSX.Element;
217

218
// Form group wrapper
219
function FormGroup(props: {
220
  row?: boolean;
221
  check?: boolean;
222
  inline?: boolean;
223
  disabled?: boolean;
224
  tag?: React.ElementType;
225
  className?: string;
226
  cssModule?: object;
227
  children?: React.ReactNode;
228
}): JSX.Element;
229
```
230

231
[Form Components](./forms.md)
232

233
### Feedback Components
234

235
User feedback elements including alerts, modals, toasts, tooltips, and popovers.
236

237
```javascript { .api }
238
// Bootstrap alert component
239
function Alert(props: {
240
  color?: string;
241
  isOpen?: boolean;
242
  toggle?: () => void;
243
  tag?: React.ElementType;
244
  className?: string;
245
  cssModule?: object;
246
  closeClassName?: string;
247
  closeAriaLabel?: string;
248
  fade?: boolean;
249
  transition?: object;
250
  innerRef?: React.Ref;
251
  children?: React.ReactNode;
252
}): JSX.Element;
253

254
// Bootstrap modal dialog
255
function Modal(props: {
256
  isOpen: boolean;
257
  toggle?: () => void;
258
  keyboard?: boolean;
259
  backdrop?: boolean | string;
260
  size?: string;
261
  centered?: boolean;
262
  scrollable?: boolean;
263
  fade?: boolean;
264
  className?: string;
265
  cssModule?: object;
266
  children?: React.ReactNode;
267
}): JSX.Element;
268
```
269

270
[Feedback Components](./feedback.md)
271

272
### Card Components
273

274
Bootstrap card components for displaying content in flexible containers.
275

276
```javascript { .api }
277
// Bootstrap card container
278
function Card(props: {
279
  inverse?: boolean;
280
  color?: string;
281
  outline?: boolean;
282
  body?: boolean;
283
  tag?: React.ElementType;
284
  className?: string;
285
  cssModule?: object;
286
  children?: React.ReactNode;
287
}): JSX.Element;
288

289
// Card body content area
290
function CardBody(props: {
291
  tag?: React.ElementType;
292
  className?: string;
293
  cssModule?: object;
294
  children?: React.ReactNode;
295
}): JSX.Element;
296
```
297

298
[Card Components](./cards.md)
299

300
### Interactive Components
301

302
Interactive elements including dropdowns, collapse, carousels, and accordion components.
303

304
```javascript { .api }
305
// Dropdown container component
306
function Dropdown(props: {
307
  disabled?: boolean;
308
  direction?: string;
309
  group?: boolean;
310
  isOpen: boolean;
311
  nav?: boolean;
312
  inNavbar?: boolean;
313
  tag?: React.ElementType;
314
  toggle: () => void;
315
  className?: string;
316
  cssModule?: object;
317
  children?: React.ReactNode;
318
}): JSX.Element;
319

320
// Bootstrap collapse component
321
function Collapse(props: {
322
  isOpen: boolean;
323
  tag?: React.ElementType;
324
  className?: string;
325
  cssModule?: object;
326
  navbar?: boolean;
327
  delay?: object;
328
  onOpened?: () => void;
329
  onClosed?: () => void;
330
  children?: React.ReactNode;
331
}): JSX.Element;
332
```
333

334
[Interactive Components](./interactive.md)
335

336
### Data Display Components
337

338
Components for displaying data including tables, lists, badges, and progress bars.
339

340
```javascript { .api }
341
// Bootstrap table component
342
function Table(props: {
343
  bordered?: boolean;
344
  borderless?: boolean;
345
  striped?: boolean;
346
  dark?: boolean;
347
  hover?: boolean;
348
  responsive?: boolean | string;
349
  size?: string;
350
  tag?: React.ElementType;
351
  responsiveTag?: React.ElementType;
352
  className?: string;
353
  cssModule?: object;
354
  children?: React.ReactNode;
355
}): JSX.Element;
356

357
// Bootstrap list group
358
function ListGroup(props: {
359
  tag?: React.ElementType;
360
  flush?: boolean;
361
  horizontal?: boolean | string;
362
  className?: string;
363
  cssModule?: object;
364
  children?: React.ReactNode;
365
}): JSX.Element;
366
```
367

368
[Data Display Components](./data-display.md)
369

370
### Utility Components and Exports
371

372
Utility functions, constants, contexts, and helper components.
373

374
```javascript { .api }
375
// Utility namespace with helper functions
376
namespace Util {
377
  function mapToCssModules(className?: string, cssModule?: object): string;
378
  function omit(obj: object, omitKeys: string[]): object;
379
  function pick(obj: object, keys: string[]): object;
380
  const TransitionTimeouts: {
381
    Fade: number;
382
    Collapse: number;
383
    Modal: number;
384
    Carousel: number;
385
    Offcanvas: number;
386
  };
387
  const keyCodes: {
388
    esc: number;
389
    space: number;
390
    enter: number;
391
    tab: number;
392
    up: number;
393
    down: number;
394
  };
395
}
396

397
// Dropdown context for nested components
398
const DropdownContext: React.Context;
399

400
// Accordion context for nested components  
401
const AccordionContext: React.Context;
402

403
// Polyfill namespace for browser compatibility
404
namespace Polyfill {
405
  // Provides CustomEvent and Object.values polyfills
406
}
407
```
408

409
[Utilities and Contexts](./utilities.md)
410

411
## Types
412

413
```javascript { .api }
414
// React type definitions used throughout Reactstrap
415
namespace React {
416
  type ReactNode = string | number | boolean | JSX.Element | ReactNode[] | null | undefined;
417
  type ElementType = string | ComponentType<any>;
418
  type Ref<T = any> = RefObject<T> | ((instance: T | null) => void) | null;
419
  interface RefObject<T> {
420
    current: T | null;
421
  }
422
  interface ComponentType<P = {}> {
423
    (props: P): ReactNode;
424
  }
425
  interface MouseEvent<T = Element> extends SyntheticEvent<T> {
426
    button: number;
427
    buttons: number;
428
    clientX: number;
429
    clientY: number;
430
    ctrlKey: boolean;
431
    metaKey: boolean;
432
    shiftKey: boolean;
433
    altKey: boolean;
434
  }
435
  interface SyntheticEvent<T = Element> {
436
    currentTarget: T;
437
    target: EventTarget & T;
438
    preventDefault(): void;
439
    stopPropagation(): void;
440
  }
441
}
442

443
// JSX element type for component returns
444
interface JSX {
445
  Element: any;
446
}
447

448
// CSS Module interface for styled components
449
interface CSSModule {
450
  [className: string]: string;
451
}
452

453
// Common props shared across components
454
interface BaseProps {
455
  tag?: React.ElementType;
456
  className?: string;
457
  cssModule?: CSSModule;
458
  children?: React.ReactNode;
459
}
460

461
// Color variants used across components
462
type Color = 
463
  | 'primary' 
464
  | 'secondary' 
465
  | 'success' 
466
  | 'info' 
467
  | 'warning' 
468
  | 'danger' 
469
  | 'light' 
470
  | 'dark';
471

472
// Size variants used across components
473
type Size = 'sm' | 'lg';
474
```