DrawerTrigger

The DrawerTrigger is used to render the button (or other element) that will trigger a drawer, and to define the drawer that should be displayed.

DrawerTrigger takes a prop, id, which should be a string. This will find the DrawerTarget with the same id string, and display it.

Its immediate child should be a function that receives

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

and returns the React tree to render for the trigger

Copy

Copied

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

  <DrawerTarget id="a-drawer">
    {({ isOpen, hideTarget }) => (
      <Drawer isOpen={isOpen}>Drawer content</Drawer>
    )}
  </DrawerTarget>
  <ModalRoot />
</ModalProvider>;