showing results for - "next js modal dialog"
Nolhan
14 Jul 2017
1import React from "react";
2
3// reactstrap components
4import { Button, Modal, ModalBody, ModalFooter } from "reactstrap";
5
6function Example() {
7  const [modalOpen, setModalOpen] = React.useState(false);
8  return (
9    <>
10      <Button
11        color="primary"
12        type="button"
13        onClick={() => setModalOpen(!modalOpen)}
14      >
15        Launch demo modal
16      </Button>
17      <Modal toggle={() => setModalOpen(!modalOpen)} isOpen={modalOpen}>
18        <div className=" modal-header">
19          <h5 className=" modal-title" id="exampleModalLabel">
20            Modal title
21          </h5>
22          <button
23            aria-label="Close"
24            className=" close"
25            type="button"
26            onClick={() => setModalOpen(!modalOpen)}
27          >
28            <span aria-hidden={true}>×</span>
29          </button>
30        </div>
31        <ModalBody>...</ModalBody>
32        <ModalFooter>
33          <Button
34            color="secondary"
35            type="button"
36            onClick={() => setModalOpen(!modalOpen)}
37          >
38            Close
39          </Button>
40          <Button color="primary" type="button">
41            Save changes
42          </Button>
43        </ModalFooter>
44      </Modal>
45    </>
46  );
47}
48
49export default Example;