FlyoutTrigger

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

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

It also takes a bolean prop, showCover, which determines whether or not to show a semi-opaque 'Cover' filling the screen behind the flyout. The Cover can be clicked to close the flyout.

FlyoutTrigger's 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 FlyoutTarget = require("./FlyoutTarget").default;
const Flyout = ({ children }) => (
  <div
    style={{
      backgroundColor: "white",
      padding: "1rem",
      position: "absolute",
      zIndex: 5,
    }}
  >
    {children}
  </div>
);
<ModalProvider>
  <FlyoutTrigger id="a-flyout">
    {({ showTarget, hideTarget, isOpen }) => (
      <button onClick={isOpen ? hideTarget : showTarget}>Push me</button>
    )}
  </FlyoutTrigger>

  <FlyoutTarget id="a-flyout">
    {({ isOpen, hideTarget }) => <Flyout>Hello from this flyout!</Flyout>}
  </FlyoutTarget>
  <ModalRoot />
</ModalProvider>;