foris-js/src/bootstrap/Modal.md

Bootstrap modal component.

It's required to have an element <div id={"modal-container"}/> somewhere on the page since modals are rendered in portals.

Modals also have three optional sizes, which can be defined through the size prop:

• small - sm
• large - lg
• extra-large - xl

For more details please visit Bootstrap documentation.

<div id="modal-container" />

import { ModalHeader, ModalBody, ModalFooter } from "./Modal";

import { useState } from "react";
const [shown, setShown] = useState(false);

<>
    <Modal setShown={setShown} shown={shown} size="sm">
        <ModalHeader setShown={setShown} title="Warning!" />
        <ModalBody>
            <p>Bla bla bla...</p>
        </ModalBody>
        <ModalFooter>
            <button
                className="btn btn-secondary"
                onClick={() => setShown(false)}
            >
                Skip it
            </button>
        </ModalFooter>
    </Modal>

    <button className="btn btn-secondary" onClick={() => setShown(true)}>
        Show modal
    </button>
</>;