website·Indexed 29 days ago
https://react-bootstrap.netlify.app/A complete re-implementation of Bootstrap's components as React components. Includes documentation for layout, forms, and UI components such as Navbars, Modals, and Accordions, with migration guides for v2 and v3 and support for Bootstrap 5 color modes.
bootstrap.js or jQuery. While standard Bootstrap relies on imperative DOM manipulation via jQuery for events and methods, React-Bootstrap uses React's state and virtual DOM to manage component behavior, providing a more reliable and declarative approach to building UI components.React-Bootstrap Overlays provide a set of components for positioning tooltips, popovers, and custom overlays. They rely on the third-party library Popper.js, which is included automatically. Key architectural points:
<Tooltip> and <Popover> do not position themselves; they rely on <Overlay> or <OverlayTrigger> to inject ref and style props.disabled elements must be triggered on a wrapper element because disabled elements do not fire the necessary events.Overlay component is the fundamental wrapper for positioning and controlling visibility. It requires a 'target' (the element the overlay is positioned relative to) and an 'overlay' (the element to be positioned). It injects props (like style and placement) into its children via a render prop pattern.import { useState, useRef } from 'react';
import Button from 'react-bootstrap/Button';
import Overlay from 'react-bootstrap/Overlay';
function Example() {
const [show, setShow] = useState(false);
const target = useRef(null);
return (
<>
<Button variant="danger" ref={target} onClick={() => setShow(!show)}>
Click me to see
</Button>
<Overlay target={target.current} show={show} placement="right">
{({ placement, arrowProps, show, popper, hasDoneInitialMeasure, ...props }) => (
<div
{...props}
style={{
position: 'absolute',
backgroundColor: 'rgba(255, 100, 100, 0.85)',
padding: '2px 10px',
color: 'white',
borderRadius: 3,
...props.style
}}
>
Simple tooltip
</div>
)}
</Overlay>
</>
);
}<Form.Floating> component to wrap the input and label manually. The <Form.Control> must be placed before the <label> element to ensure the CSS sibling selector (~) functions correctly.import Form from 'react-bootstrap/Form';
function FormFloatingCustom() {
return (
<Form.Floating className="mb-3">
<Form.Control id="floatingInputCustom" type="email" placeholder="name@example.com" />
<label htmlFor="floatingInputCustom">Email address</label>
</Form.Floating>
);
}Collapse and Fade components now require a child component that forwards its ref to the underlying HTML element to function correctly.Tab components and replacing the standard <Nav> component with a <ListGroup>.Container component is used to center and horizontally pad site content. By default, it provides a responsive pixel width based on the viewport size.import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
return (
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';
function ButtonExample() {
return (
<Button variant="primary">
Profile
<Badge bg="secondary">9</Badge>
<span className="visually-hidden">unread messages</span>
</Button>
);
}react-bootstrap components are built upon the @restart/ui library. When the standard Bootstrap components in react-bootstrap do not provide enough flexibility or reach their functional limits, developers can use the @restart/ui base components directly to build more generic or highly customized accessible components.Ratio component uses generated pseudo-elements to ensure an element maintains a specific aspect ratio relative to the width of its parent. This is ideal for responsively handling external content such as <iframe>, <embed>, <video>, and <object>, as well as standard HTML elements like <div> or <img>. Styles are applied from the parent .ratio class directly to the child element. Note that frameborder="0" is not required for iframes when using this component.import Ratio from 'react-bootstrap/Ratio';
function BasicExample() {
return (
<div style={{ width: 660, height: 'auto' }}>
<Ratio aspectRatio="16x9">
<embed type="image/svg+xml" src="/img/TheresaKnott_castle.svg" />
</Ratio>
</div>
);
}