@hig/flyout

Flyout

A flyout is a lightweight popup container, typically styled as a small box with a nub (pointer). Flyouts provide a container for navigation, actions, and menu options.

Read more about when and how to use the Flyout component on the website.

Getting started

Install the package

yarn add @hig/flyout

Import the component and CSS

import Flyout, { anchorPoints } from "@hig/flyout";
import "@hig/flyout/build/index.css";

Basic usage

<Flyout
  anchorPoint={anchorPoints.RIGHT_TOP}
  content={<p>Any content can go in here.</p>}
>
  <Button title="Open flyout" />
</Flyout>

Using render props for additional customization

Content

When a function is provided to props.content, it will be given a payload containing:

• hideFlyout {function()}
  • An action that will hide the flyout when called

<Flyout
  content={({ hideFlyout }) => (
    <div>
      <p>Any content can go in here.</p>
      <button type="button" onClick={hideFlyout}>
        Click to hide
      </button>
    </div>
  )}
>
  <Button title="Open flyout" />
</Flyout>

Panel:

When a function is provided to props.panel, it will be given a payload containing:

• innerRef {function(HTMLElement)}
  • A required ref that's used to position the flyout
  • innerRef must be set properly for the flyout to render correctly.
• hideFlyout {function()}
  • An action that will hide the flyout when called
• [content] {JSX}
  • Rendered JSX via props.content
• [handleScroll] {function(UIEvent)}
  • The handler provided to props.handleScroll
• [maxHeight] {number}
  • The value provided to maxHeight

<Flyout
  panel={({ innerRef }) => (
    <Flyout.Panel innerRef={innerRef}>
      <CustomContainer>
        <p>Any content can go in here.</p>
      </CustomContainer>
    </Flyout.Panel>
  )}
>
  <Button title="Open flyout" />
</Flyout>

Children:

When a function is provided to props.content, it will be given a payload containing:

• handleClick {function(MouseEvent)}
  • An event handler that will toggle the flyout's visibility

<Flyout
  content={<p>Any content can go in here.</p>}
>
  {({ handleClick }) => (
    <CustomWrapper>
      <CustomButton onClick={handleClick} />
    </CustomWrapper>
  )}
</Flyout>