Reactstrap is a version Bootstrap made for React.
It’s a set of React components that have Boostrap styles.
In this article, we’ll look at how to add modals with Reactstrap.
Modals with a Custom Close Icon
We can change the close icon of the button with the charCode prop.
For instance, we can write:
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
export default function App() {
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<div>
<Button color="danger" onClick={toggle}>
open modal
</Button>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle} charCode="close">
Modal title
</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
We set the charCode prop to 'close' so that it’s displayed as the close button value.
Clean Up
We can change the cleanup options of our modal.
If the unmountOnClose options is false , then the data we entered into the modal stays available after we close it.
This is because it’s not completely unmounted.
For example, we can write:
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Input,
Form
} from "reactstrap";
export default function App() {
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<div>
<Form inline onSubmit={e => e.preventDefault()}>
<Button color="danger" onClick={toggle}>
open modal
</Button>
</Form>
<Modal isOpen={modal} toggle={toggle} unmountOnClose={false}>
<ModalHeader toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
<Input type="textarea" placeholder="Write something" rows={5} />
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
to create a modal with a text area inside it.
When we type something, it’ll still be available after we close and open the modal again.
Focus After Close
We can make our modal focus on the button that opened it after it’s closed.
To do that, we set the returnFocusAfterClose to true .
For example, we can write:
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Input,
Label,
Form,
FormGroup
} from "reactstrap";
export default function App() {
const [open, setOpen] = useState(false);
const toggle = () => setOpen(!open);
return (
<div>
<Button color="danger" onClick={toggle}>
Open
</Button>
<Modal returnFocusAfterClose isOpen={open}>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
scelerisque nisl dolor, eu aliquam nulla volutpat sed. Cras velit ex,
aliquam quis lobortis vel, fermentum at leo. Donec hendrerit, ligula
in ultricies suscipit, ante justo tempus erat, et cursus odio arcu ac
lorem.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Once we close the modal, the Open button will be focused.
This is because we have the returnFocusAfterClose prop added.
Conclusion
We can return focus to the element that opened the modal.
Also, the close button text and clean up options can be changed.
