Reactstrap — Modal Options

Photo by Joe Caione 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.

Nested Modals

We can add nested modals with Reactstrap.

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 [nestedModal, setNestedModal] = useState(false);
const [closeAll, setCloseAll] = useState(false);
const toggle = () => setModal(!modal);
const toggleNested = () => {
setNestedModal(!nestedModal);
setCloseAll(false);
};
const toggleAll = () => {
setNestedModal(!nestedModal);
setCloseAll(true);
};
return (
<div>
<Button color="danger" onClick={toggle}>
open modal
</Button>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
scelerisque nisl dolor,
<br />
<Button color="success" onClick={toggleNested}>
Show Nested Modal
</Button>
<Modal
isOpen={nestedModal}
toggle={toggleNested}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>Nested Modal title</ModalHeader>
<ModalBody>
Suspendisse non augue erat. Nunc nec eleifend ligula.{" "}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggleNested}>
Done
</Button>
<Button color="secondary" onClick={toggleAll}>
All Done
</Button>
</ModalFooter>
</Modal>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something
</Button>
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}

We have the Modal component inside another Modal component to display our nested modal.

The inner one will show on top of the outer one.

We have states to open and close each modal and we pass that to the isOpen prop.

Modals with Custom Transition Timeouts

The transition duration can change with Reactstrap modals.

For instance,e we 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}
modalTransition={{ timeout: 1000 }}
backdropTransition={{ timeout: 2000 }}
toggle={toggle}
>
<ModalHeader toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
scelerisque nisl dolor,
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something
</Button>
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}

to change the modal and backdrop transition durations.

modalTransition takes an object with the timeout property to change how long to wait until the modal is displayed.

Likewise, we have the backdropTransition prop that also has the timeout property to change the wait time until when the backdrop is displayed.

All the times are in milliseconds.

Modals with External Button

We can add an external component as the close button for the modal.

All we have to do is to set the external prop of the Modal .

For example, 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); const externalCloseBtn = (
<button
className="close"
style={{ position: "absolute", top: "45px", right: "15px" }}
onClick={toggle}
>
x
</button>
);
return (
<div>
<Button color="danger" onClick={toggle}>
open modal
</Button>
<Modal isOpen={modal} toggle={toggle} external={externalCloseBtn}>
<ModalHeader>Modal title</ModalHeader>
<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}>
Do Something
</Button>
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}

to add the external component to the external prop of the modal.

Photo by Rachel Park on Unsplash

Conclusion

We can change various options of the modal.

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