DrawerTarget

A DrawerTarget contains the React component that should be rendered when its linked DrawerTrigger calls showTarget.

DrawerTarget takes a prop, id, which should be a string. This must match the id of the DrawerTrigger that should open this Drawer.

Its immediate child should be a function that receives

hideTarget {function} Called to hide the target
isOpen {boolean} Whether the target is open

and returns the React tree to render inside the drawer

Copy

Copied

const DrawerTarget = require("./DrawerTarget").DrawerTarget;
const Drawer = require("./Drawer").default;
<ModalProvider>
  <DrawerTrigger id="another-drawer">
    {({ showTarget, hideTarget, isOpen }) => (
      <button onClick={isOpen ? hideTarget : showTarget}>
        Show the Target
      </button>
    )}
  </DrawerTrigger>

  <DrawerTarget id="another-drawer">
    {({ isOpen, hideTarget }) => (
      <Drawer isOpen={isOpen}>
        I am the target
        <button
          style={{ display: "block", marginTop: "2rem" }}
          onClick={hideTarget}
        >
          Close me!
        </button>
      </Drawer>
    )}
  </DrawerTarget>
  <ModalRoot />
</ModalProvider>;