reactstrap

Reactstrap provides a full set of React components implementing Bootstrap 5’s design system and interactive widgets - buttons, modals, dropdowns, forms, cards, carousels, accordions, and more - without depending on Bootstrap’s own JavaScript or jQuery. Components are built as plain React functions using hooks and Context, with Popper.js (via react-popper) handling advanced positioning for tooltips, popovers, and dropdowns.

The library favors composition over configuration: content is passed as props.children rather than named component props, and nearly every component accepts a tag prop to control which underlying HTML element (or custom component, like a router Link) it renders as. This makes reactstrap a drop-in way to bring Bootstrap 5’s styling and behavior into an existing React codebase while keeping full control over markup and structure.

What You Get

• ~50 Bootstrap 5 components - Button, Card, Modal, Dropdown, Navbar, Accordion, Carousel, Tooltip, Popover, Form controls, and more, all as ready-to-import React components.
• No jQuery or Bootstrap JS dependency - All interactive behavior (toggling, positioning, transitions) is reimplemented in React, so you only need Bootstrap’s CSS.
• Composable, children-based API - Content is passed via props.children rather than named component props, keeping markup close to plain JSX/HTML.
• Customizable output tags - Nearly every component accepts a tag prop to render as a different HTML element or custom component (e.g. a router Link).
• TypeScript type definitions - Hand-maintained .d.ts declarations validated with dtslint, even though the library itself is authored in JavaScript.
• CJS, ESM, and type builds - Published with parallel lib/ (CommonJS), esm/ (ES modules), and types/ outputs for different bundler needs.

Common Use Cases

• Migrating a Bootstrap-based site to React - Teams moving an existing Bootstrap HTML site into a React app reach for reactstrap to keep the same class-based styling.
• Building admin dashboards and internal tools - Modals, dropdowns, forms, and navbars cover the common CRUD-heavy UI patterns internal tools need.
• Adding accessible interactive widgets - Accordion, Tooltip, Popover, and Carousel components handle ARIA attributes and keyboard interaction out of the box.
• Prototyping without a custom design system - Projects that want Bootstrap’s established visual language without building components from scratch.

Under The Hood

Architecture Reactstrap is organized as a flat collection of roughly 90 independent, stateless functional React components (Button.js, Card.js, Dropdown.js, and so on) under src/, each following a consistent structural pattern: a PropTypes declaration, a functional component using hooks (e.g. useCallback in Button.js), a tag prop for output-element customization, and a set of cross-cutting utilities in src/utils.js (mapToCssModules, omit/pick, scrollbar-width helpers) plus React Context modules (DropdownContext, AccordionContext, CarouselContext) that let compound-component pairs like Dropdown/DropdownItem or Accordion/AccordionItem communicate. There is no central store, router, or app-lifecycle owner - each component is a self-contained composition unit that receives content via props.children rather than named-prop injection, so swapping the positioning engine (currently react-popper/Popper.js, used by Dropdown, Tooltip, and Popover) would only touch that small subset of components, not the rest of the tree.

Tech Stack The source is JavaScript (roughly 82% of the codebase) with hand-authored TypeScript declaration files (types/index.d.ts, validated via dtslint) rather than a native TypeScript source. Babel builds the library into three parallel output targets - lib/ (CommonJS), esm/ (ES modules), and types/ (declarations) - via separate babel.config.cjs/babel.build.config.cjs/babel.esm.config.cjs configs. Runtime dependencies are intentionally minimal: classnames for conditional class composition, prop-types for runtime validation, @popperjs/core plus react-popper for advanced positioning, and react-transition-group for Fade/Collapse/Carousel animation, all against a peer dependency on React >=16.8. Storybook 6 powers the component documentation/demo site, and GitHub Actions runs CI across multiple Node versions.

Code Quality The repository ships 89 dedicated Jest test files under src/tests/, essentially one per component, using @testing-library/react and @testing-library/user-event for behavior-driven assertions (render, screen queries, simulated user interaction) rather than snapshot-only testing, backed by shared helpers (testForDefaultTag, testForChildrenInComponent) that keep assertions consistent across components. Every component declares explicit PropTypes for runtime validation alongside the maintained TypeScript declarations. ESLint (airbnb config plus jsx-a11y and react plugins) and Prettier enforce style, and the test.yml GitHub Actions workflow runs lint, build, and test:ci on every push and pull request across three Node.js versions. Error handling is necessarily light, since these are presentational components with little async or exception-prone logic, but defensive prop guards (e.g. disabled-click prevention in Button) are present throughout.

API Design Reactstrap’s defining choice is excluding Bootstrap’s own JavaScript and jQuery entirely, reimplementing Bootstrap 5’s interactive behaviors (Modal, Dropdown, Tooltip, Popover, Carousel, Collapse, Accordion) as native React state/hooks-driven components, with content composed through props.children rather than named-prop slots - a stricter compositional convention than many Bootstrap wrappers use. Positioning-heavy components delegate specifically to Popper.js via react-popper instead of hand-rolling placement math, and nearly every component accepts a tag prop to swap its rendered DOM element or substitute a custom component, such as a router Link, without extra wrapper markup. These are deliberate, well-executed API decisions, but the overall approach - one component per Bootstrap widget, mapped closely to Bootstrap’s own CSS classes - is a well-established pattern in this space, shared closely with competitors like react-bootstrap, rather than a genuinely novel architecture.