{"id":11912,"library":"reactstrap","title":"Reactstrap: React Bootstrap Components","description":"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.","status":"active","version":"9.2.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/reactstrap/reactstrap","tags":["javascript","reactstrap","bootstrap","react","component","components","react-component","ui","typescript"],"install":[{"cmd":"npm install reactstrap","lang":"bash","label":"npm"},{"cmd":"yarn add reactstrap","lang":"bash","label":"yarn"},{"cmd":"pnpm add reactstrap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all React components.","package":"react","optional":false},{"reason":"Required peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"Required at runtime for styling; Reactstrap provides components but not the CSS itself.","package":"bootstrap","optional":false}],"imports":[{"note":"Reactstrap uses named exports for all components, not default exports.","wrong":"import Button from 'reactstrap';","symbol":"Button","correct":"import { Button } from 'reactstrap';"},{"note":"Primarily used in modern React applications with ESM. CommonJS require() pattern is not officially supported or recommended for direct component imports in Reactstrap v9+.","wrong":"const { Modal } = require('reactstrap');","symbol":"Modal","correct":"import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';"},{"note":"While star imports work, it's generally preferred to import specific components by name to enable tree-shaking and improve bundle size.","wrong":"import * as Reactstrap from 'reactstrap';\n<Reactstrap.Input />","symbol":"Input","correct":"import { Input } from 'reactstrap';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport 'bootstrap/dist/css/bootstrap.css';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nfunction App() {\n  const [modalOpen, setModalOpen] = useState(false);\n  const toggle = () => setModalOpen(!modalOpen);\n\n  return (\n    <div className=\"App p-4\">\n      <h1>Welcome to Reactstrap!</h1>\n      <Button color=\"primary\" onClick={toggle}>\n        Open Modal\n      </Button>\n      <Modal isOpen={modalOpen} toggle={toggle}>\n        <ModalHeader toggle={toggle}>Modal Title</ModalHeader>\n        <ModalBody>\n          This is a sample modal content. You can put any React components here.\n        </ModalBody>\n        <ModalFooter>\n          <Button color=\"secondary\" onClick={toggle}>Cancel</Button>\n          <Button color=\"primary\" onClick={toggle}>Do Something</Button>\n        </ModalFooter>\n      </Modal>\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);","lang":"typescript","description":"Demonstrates setting up a basic React application with Reactstrap, including importing Bootstrap CSS and using interactive components like Button and Modal."},"warnings":[{"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.","message":"Reactstrap v9 is built exclusively for Bootstrap 5. Projects using Bootstrap 4 must use Reactstrap v8 or earlier.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Run `npm install bootstrap` and add `import 'bootstrap/dist/css/bootstrap.css';` to your `src/index.js` or equivalent entry point file.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"Bootstrap CSS is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '...' OR Cannot find module 'bootstrap/dist/css/bootstrap.css'"},{"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`.","cause":"Using an outdated version of React that does not support Hooks (React 16.8.0+ is required by Reactstrap v9).","error":"TypeError: Cannot read properties of undefined (reading 'useState') OR hooks can only be called inside of the body of a function component"},{"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`.","cause":"Bootstrap's CSS file has not been correctly imported into the application.","error":"Reactstrap components render but have no styling applied."}],"ecosystem":"npm"}