@arcteryx/components-modal
v4.0.1
Published
Arcteryx modal
Downloads
1,941
Readme
@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