React Bootstrap is one version of Bootstrap made for React.
It’s a set of React components that have Bootstrap styles.
In this article, we’ll look at how to add list groups tabs and modals to a React app with React Bootstrap.
Tabbed Interfaces
We can use list groups as tab components.
To do that, we can put it in the Tab.Container component.
For instance, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ListGroup from "react-bootstrap/ListGroup";
import Tab from "react-bootstrap/Tab";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
export default function App() {
return (
<div>
<Tab.Container defaultActiveKey="link1">
<Row>
<Col sm={3}>
<ListGroup>
<ListGroup.Item action href="link1">
Link 1
</ListGroup.Item>
<ListGroup.Item action href="link2">
Link 2
</ListGroup.Item>
</ListGroup>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="link1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
efficitur massa tellus, non ultrices augue sagittis ornare. Sed
ultrices ligula in est tempus tincidunt.
</Tab.Pane>
<Tab.Pane eventKey="link2">
Nam id consequat lacus, et mattis turpis. Sed velit nibh,
tincidunt in ante a, accumsan fringilla odio. Etiam fermentum
euismod enim id faucibus. Etiam facilisis nulla id leo imperdiet
aliquet.
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</div>
);
}
to use the list group items as navigation links.
We set the defaultEventKey to set the default tab to display.
And we set the eventKey on each Tab.Pane to name them so that we can make links for them with the href prop on the ListGroup.Item .
Modals
Modals are dialog boxes that we can add on our site.
It can be used for notifications or custom content.
They’re positioned over everything else in the document and remove scroll from the body so that the modal content scrolls.
Modals are unmounted when closed.
We can only display one modal at a time.
Modals keep the keyboard focus on the modal.
We can make basic modal by using the Modalcomponents:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
export default function App() {
return (
<div>
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
efficitur massa tellus, non ultrices augue sagittis ornare. Sed
ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan
fringilla odio. Etiam fermentum euismod enim id faucibus. Etiam
facilisis nulla id leo imperdiet aliquet. In dignissim nulla non
magna commodo ullamcorper. Fusce non ligula id tellus dapibus tempor
sit amet in libero. Proin malesuada vulputate augue in bibendum. In
mollis felis eu ante pharetra, ut vehicula sapien malesuada. Nulla
imperdiet, urna a laoreet ullamcorper, massa nunc posuere neque,
iaculis egestas urna arcu a metus.
</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save </Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
}
Modal.Dialog lets us display the dialog.
Modal.Header has the header.
closeButton adds the close button.
Modal.Title has the modal title.
Modal.Body has the modal body content.
Modal.Footer has the modal footer, where we can add some buttons if we wish.
Static Backdrop
We can use the Modal component and set the backdrop prop to static to make a static backdrop.
This way, we won’t close the modal if we click outside it.
For example, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
export default function App() {
const [show, setShow] = React.useState(false);
const onClose = () => setShow(false);
const onClick = () => setShow(true);
return (
<>
<Button variant="primary" onClick={onClick}>
open modal
</Button>
<Modal show={show} onHide={onClose} backdrop="static" keyboard={false}>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
efficitur massa tellus, non ultrices augue sagittis ornare. Sed
ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
id leo imperdiet aliquet. In dignissim nulla non magna commodo
ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
libero. Proin malesuada vulputate augue in bibendum. In mollis felis
eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
arcu a metus. escape key.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
</>
);
}
backdrop set to static lets us disable closing with anything other than the close button.
We can only close if we click the close button.
We can’t click outside or press the Esc key to close it.
keyboard set to false disables closing with the Esc key.
The show prop is used to control when the modal is open or not.
We have the onHide prop to set the show state to false to close the modal.
Also, we have an open modal button to set the show state to true when we click it.
This will open the modal.
Conclusion
We can use list group items as tabs.
With the Modal component, we can add modals easily.
