Reactstrap — Modal Close Options

Photo by A.R.T.Paola on Unsplash

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.

Photo by James Lee on Unsplash

Conclusion

We can return focus to the element that opened the modal.

Also, the close button text and clean up options can be changed.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store