{"id":11655,"library":"react-bootstrap","title":"React-Bootstrap Components","description":"React-Bootstrap is a complete re-implementation of the Bootstrap 5 components using React, removing the need for jQuery. It provides a set of accessible and customizable React components that mirror Bootstrap's visual style and functionality. The current stable version is 2.10.10, with active development on a new major version (v3.0.0-beta.x) that introduces further breaking changes and improvements like enhanced ESM support. This library is a popular choice for developers who want to leverage Bootstrap's extensive styling framework within a React application without the performance overhead or potential conflicts of integrating traditional Bootstrap's JavaScript. Releases are frequent for both maintenance and beta branches, ensuring timely bug fixes and new features.","status":"active","version":"2.10.10","language":"javascript","source_language":"en","source_url":"https://github.com/react-bootstrap/react-bootstrap","tags":["javascript","bootstrap","react","component","components","ecosystem-react","react-component","typescript"],"install":[{"cmd":"npm install react-bootstrap","lang":"bash","label":"npm"},{"cmd":"yarn add react-bootstrap","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-bootstrap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI rendering.","package":"react","optional":false},{"reason":"React's entry point for DOM-specific rendering.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React. Required when using TypeScript.","package":"@types/react","optional":true}],"imports":[{"note":"For optimal bundle size, import individual components directly from their sub-paths.","wrong":"import { Button } from 'react-bootstrap';","symbol":"Button","correct":"import Button from 'react-bootstrap/Button';"},{"note":"ESM imports are the recommended pattern. CommonJS `require` is not officially supported or documented for modern versions.","wrong":"const Modal = require('react-bootstrap').Modal;","symbol":"Modal","correct":"import Modal from 'react-bootstrap/Modal';"},{"note":"Sub-component imports like `Navbar.Brand` are accessed via the main Navbar component object, e.g., `Navbar.Brand`.","symbol":"Navbar","correct":"import Navbar from 'react-bootstrap/Navbar';"},{"note":"The `Form` component also exports sub-components like `Form.Control` and `Form.Group`.","symbol":"Form","correct":"import Form from 'react-bootstrap/Form';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Modal from 'react-bootstrap/Modal';\nimport Form from 'react-bootstrap/Form';\nimport Container from 'react-bootstrap/Container';\n\nfunction MyFormModal() {\n  const [show, setShow] = useState(false);\n  const handleClose = () => setShow(false);\n  const handleShow = () => setShow(true);\n\n  const handleSubmit = (event: React.FormEvent) => {\n    event.preventDefault();\n    console.log('Form submitted!');\n    handleClose();\n  };\n\n  return (\n    <Container className=\"p-4\">\n      <Button variant=\"primary\" onClick={handleShow}>\n        Launch demo modal\n      </Button>\n\n      <Modal show={show} onHide={handleClose}>\n        <Modal.Header closeButton>\n          <Modal.Title>Login</Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <Form onSubmit={handleSubmit}>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicEmail\">\n              <Form.Label>Email address</Form.Label>\n              <Form.Control type=\"email\" placeholder=\"Enter email\" />\n              <Form.Text className=\"text-muted\">\n                We'll never share your email with anyone else.\n              </Form.Text>\n            </Form.Group>\n\n            <Form.Group className=\"mb-3\" controlId=\"formBasicPassword\">\n              <Form.Label>Password</Form.Label>\n              <Form.Control type=\"password\" placeholder=\"Password\" />\n            </Form.Group>\n            <Button variant=\"secondary\" onClick={handleClose} className=\"me-2\">\n              Close\n            </Button>\n            <Button variant=\"primary\" type=\"submit\">\n              Submit\n            </Button>\n          </Form>\n        </Modal.Body>\n      </Modal>\n    </Container>\n  );\n}\n\nexport default MyFormModal;","lang":"typescript","description":"Demonstrates a basic React-Bootstrap setup with a button that opens a modal containing a form, showcasing component imports and state management."},"warnings":[{"fix":"Review your custom class handling and CSS for components. If directly manipulating class names based on `react-bootstrap`'s internal class logic, ensure compatibility with `clsx`'s behavior or adjust to use `className` prop directly.","message":"React-Bootstrap v3.0.0-beta.1 introduces breaking changes, including migration to the `clsx` library for class name management. Existing custom class logic might need adjustments.","severity":"breaking","affected_versions":">=3.0.0-beta.1"},{"fix":"Consult the `react-bootstrap` v3 migration guide for specific details on `Offcanvas` rendering changes and update your component usage accordingly. Test thoroughly.","message":"The `Offcanvas` component underwent a significant change in its rendering behavior in v3.0.0-beta.1. This may affect how it integrates into existing layouts or state management.","severity":"breaking","affected_versions":">=3.0.0-beta.1"},{"fix":"Import Bootstrap CSS globally, e.g., `import 'bootstrap/dist/css/bootstrap.min.css';` in your `index.js` or `App.js`, or link it in your HTML.","message":"React-Bootstrap components require the Bootstrap CSS stylesheet to be included in your project for proper styling. Without it, components will appear unstyled.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Check the `peerDependencies` in `react-bootstrap`'s `package.json` for the version you are installing and ensure your project's `react` and `react-dom` versions satisfy these requirements. Upgrade or downgrade React if necessary.","message":"When upgrading React-Bootstrap, especially between minor versions of v2, ensure your React and React-DOM peer dependencies match the specified ranges to avoid type conflicts or runtime errors, particularly with React 19.","severity":"gotcha","affected_versions":">=2.10.7"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import Button from 'react-bootstrap/Button';` for default exports from sub-paths, and `import { NamedExport } from 'react-bootstrap';` for named exports directly from the main package if applicable. Avoid CommonJS `require` for components.","cause":"Incorrectly using named import for a default export from a sub-path, or attempting to use a CommonJS `require` call with a modern React setup.","error":"TypeError: (0 , react_bootstrap_Button__WEBPACK_IMPORTED_MODULE_2__.default) is not a function"},{"fix":"Install Bootstrap as a dependency: `npm install bootstrap` or `yarn add bootstrap`, and ensure the import path `import 'bootstrap/dist/css/bootstrap.min.css';` is correct in your main application file.","cause":"The Bootstrap CSS file is not found, likely because `bootstrap` is not installed or the import path is incorrect.","error":"Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css'"}],"ecosystem":"npm"}