Reactstrap: React Bootstrap Components

Common errors

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

  cause 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

  cause 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.

  cause 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`.

Warnings

• breaking Reactstrap 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.
• gotcha Reactstrap 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.
• gotcha Some 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.

Install

• npm install reactstrap npm
• yarn add reactstrap yarn
• pnpm add reactstrap pnpm

Imports

• Button
  wrong:

  import Button from 'reactstrap';

  correct:

  import { Button } from 'reactstrap';

  Reactstrap uses named exports for all components, not default exports.
• Modal
  wrong:

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

  correct:

  import { Modal, ModalHeader, ModalBody, ModalFooter } from '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
  wrong:

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

  correct:

  import { Input } from 'reactstrap';

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

Quickstart

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 />);