React-Bootstrap Components

Common errors

• TypeError: (0 , react_bootstrap_Button__WEBPACK_IMPORTED_MODULE_2__.default) is not a function

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

• Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css'

  cause The Bootstrap CSS file is not found, likely because `bootstrap` is not installed or the import path is incorrect.
  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.

Warnings

• breaking 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.
  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.
• breaking 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.
  Fix: Consult the `react-bootstrap` v3 migration guide for specific details on `Offcanvas` rendering changes and update your component usage accordingly. Test thoroughly.
• gotcha React-Bootstrap components require the Bootstrap CSS stylesheet to be included in your project for proper styling. Without it, components will appear unstyled.
  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.
• gotcha 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.
  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.

Install

• npm install react-bootstrap npm
• yarn add react-bootstrap yarn
• pnpm add react-bootstrap pnpm

Imports

• Button
  wrong:

  import { Button } from 'react-bootstrap';

  correct:

  import Button from 'react-bootstrap/Button';

  For optimal bundle size, import individual components directly from their sub-paths.
• Modal
  wrong:

  const Modal = require('react-bootstrap').Modal;

  correct:

  import Modal from 'react-bootstrap/Modal';

  ESM imports are the recommended pattern. CommonJS `require` is not officially supported or documented for modern versions.
• Navbar

  import Navbar from 'react-bootstrap/Navbar';

  Sub-component imports like `Navbar.Brand` are accessed via the main Navbar component object, e.g., `Navbar.Brand`.
• Form

  import Form from 'react-bootstrap/Form';

  The `Form` component also exports sub-components like `Form.Control` and `Form.Group`.

Quickstart

Demonstrates a basic React-Bootstrap setup with a button that opens a modal containing a form, showcasing component imports and state management.

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Container from 'react-bootstrap/Container';

function MyFormModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log('Form submitted!');
    handleClose();
  };

  return (
    <Container className="p-4">
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Login</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form onSubmit={handleSubmit}>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>

            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" />
            </Form.Group>
            <Button variant="secondary" onClick={handleClose} className="me-2">
              Close
            </Button>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>
        </Modal.Body>
      </Modal>
    </Container>
  );
}

export default MyFormModal;