ModalTrigger

This is used to trigger a Modal.

ModalTrigger takes a single prop, target, which must be a reference to the component that you want to display inside the modal. The target component will receive a prop called hideTarget, which is a function that can be used to close the modal. Pressing the escape key or clicking outside the modal will also close it.

The direct child of ModalTrigger should be a function that receives a prop showTarget, and returns the React component that you would like to use as a trigger.

Copy

Copied

const { ModalTrigger } = require("@jetshop/ui/Modal/ModalTrigger");
const ModalRoot = require("@jetshop/ui/Modal/ModalRoot").default;
const ModalProvider = require("@jetshop/ui/Modal/ModalProvider").default;
const Button = require("@jetshop/ui/Button").default;

const AModal = ({ hideTarget }) => (
  <div>
    <div style={{ marginBottom: "2rem" }}>I am a modal.</div>
    <Button onClick={hideTarget}>Close me</Button>
  </div>
);
<ModalProvider>
  <ModalTrigger target={AModal}>
    {({ showTarget }) => <Button onClick={showTarget}>Push Me</Button>}
  </ModalTrigger>
  <ModalRoot />
</ModalProvider>;