@arcteryx/components-modal

Just what the world needs ... another modal.

Install

npm install --save @arcteryx/components-modal

Usage

Modal functionality is driven by passed-in props. The component responsible for launching the modal should use state to deal with showing/hiding the modal, and returning focus to the button/link/element after closing.

import { Modal } from "@arcteryx/components-modal";

const MySweetSweetComponent = () => {

  const [modalIsShown, toggleModal] = useState(false);
  const [modalCaller, setModalCaller] = useState();

  const callModal = (e) => {
    setModalCaller(e.currentTarget);
    toggleModal(!modalIsShown);
  };

  return (

    <Button onClick={(e) => callModal(e)}>Modal 🚀</Button>

    <Modal modalIsShown={modalIsShown} toggleModal={toggleModal} modalCaller={modalCaller}>
      <p>Stuff and whatnot...</p>
    </Modal>

  );

}

The modal uses React Portals, so no markup will be present on page load, and will be added/removed as needed: https://reactjs.org/docs/portals.html