reactstrap

library9.2.3jsnpmunverified

Reactstrap offers a comprehensive collection of stateless React components designed to implement Bootstrap 5's user interface framework. The library, currently at stable version 9.2.3 (released September 2024), maintains a release cadence primarily focused on bug fixes and minor feature enhancements, with major versions typically aligning with Bootstrap's own releases. A key differentiator is its complete independence from jQuery and Bootstrap's own JavaScript, relying instead on React's declarative composition model for content rendering through `props.children`. For advanced positioning requirements in components like Tooltips, Popovers, and Dropdowns, Reactstrap integrates Poppers.js via `react-popper`, ensuring robust and accessible UI behavior. The package also ships with full TypeScript type definitions, enhancing developer experience for TypeScript projects.

web-framework

npm install reactstrap

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACTSTRAP

reactstrap

web-frameworkjavascriptv9.2.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Button

✓ import { Button } from 'reactstrap';

✗ import Button from 'reactstrap';

Reactstrap uses named exports for all components, not default exports.

Modal

✓ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

✗ const { Modal } = require('reactstrap');

Primarily used in modern React applications with ESM. CommonJS require() pattern is not officially supported or recommended for direct component imports in Reactstrap v9+.

Input

✓ import { Input } from 'reactstrap';

✗ import * as Reactstrap from 'reactstrap'; <Reactstrap.Input />

While star imports work, it's generally preferred to import specific components by name to enable tree-shaking and improve bundle size.

Demonstrates setting up a basic React application with Reactstrap, including importing Bootstrap CSS and using interactive components like Button and Modal.

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import 'bootstrap/dist/css/bootstrap.css'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; function App() { const [modalOpen, setModalOpen] = useState(false); const toggle = () => setModalOpen(!modalOpen); return ( <div className="App p-4"> <h1>Welcome to Reactstrap!</h1> <Button color="primary" onClick={toggle}> Open Modal </Button> <Modal isOpen={modalOpen} toggle={toggle}> <ModalHeader toggle={toggle}>Modal Title</ModalHeader> <ModalBody> This is a sample modal content. You can put any React components here. </ModalBody> <ModalFooter> <Button color="secondary" onClick={toggle}>Cancel</Button> <Button color="primary" onClick={toggle}>Do Something</Button> </ModalFooter> </Modal> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

Debug

Known issues

breakingReactstrap v9 is built exclusively for Bootstrap 5. Projects using Bootstrap 4 must use Reactstrap v8 or earlier.

fix

Upgrade your project's Bootstrap dependency to v5.x, or downgrade Reactstrap to v8.x if Bootstrap 4 is required. Note that this may require significant CSS and markup adjustments due to Bootstrap's breaking changes.

affects: >=9.0.0

gotchaReactstrap does not include Bootstrap's CSS. Users must explicitly install and import `bootstrap/dist/css/bootstrap.css` in their project's entry file to get correct styling.

fix

Run `npm install bootstrap` and add `import 'bootstrap/dist/css/bootstrap.css';` to your `src/index.js` or equivalent entry point file.

affects: >=1.0.0

gotchaSome Reactstrap components expose an `innerRef` prop for direct DOM access, which differs from React's standard `ref` prop. This can be confusing when migrating components or using `forwardRef`.

fix

Use the `innerRef` prop when `reactstrap` documentation specifies it for accessing the underlying DOM node of a component, especially for components that wrap native HTML elements (e.g., `Input`). For React component instance refs, use the standard `ref` prop where available.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '...' OR Cannot find module 'bootstrap/dist/css/bootstrap.css'

Bootstrap CSS is not installed or the import path is incorrect.

fix

Run `npm install bootstrap` to install the package. Ensure the import statement is `import 'bootstrap/dist/css/bootstrap.css';` and placed in a project entry file like `src/index.js`.

TypeError: Cannot read properties of undefined (reading 'useState') OR hooks can only be called inside of the body of a function component

Using an outdated version of React that does not support Hooks (React 16.8.0+ is required by Reactstrap v9).

fix

Ensure your project's `react` and `react-dom` versions are `^16.8.0` or higher. Upgrade using `npm install react@latest react-dom@latest`.

Reactstrap components render but have no styling applied.

Bootstrap's CSS file has not been correctly imported into the application.

fix

Verify that `import 'bootstrap/dist/css/bootstrap.css';` is present and correctly placed in your main application entry file (e.g., `src/index.js`). Also, confirm `bootstrap` is installed via `npm list bootstrap`.

Upgrade

Version history

9.2.3latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for all React components.

react-domrequiredRequired peer dependency for rendering React components to the DOM.

bootstraprequiredRequired at runtime for styling; Reactstrap provides components but not the CSS itself.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/reactstrap/reactstrap ↗

packagehttps://www.npmjs.com/package/reactstrap ↗

homepagehttps://reactstrap.github.io ↗