@hig/flyout

HIG Flyout

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@hig/flyout
1571622.3.13 months ago5 years agoMinified + gzip package size for @hig/flyout in KB

Readme

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 @hig/theme-context @hig/theme-data

Import the component

import Flyout, { anchorPoints } from "@hig/flyout";

Basic usage

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

Custom CSS

Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
Flyout also has a stylesheet prop that accepts a function wherein you can modify its styles. The original styles, props, current theme data and theme meta will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. For instance
function customStylesheet(styles) {
  return {
    ...styles,
    flyoutContainer: {
      ...styles.flyoutContainer,
      opacity: "0.3"
    },
    panel: {
      ...styles.panel,
      backgroundColor: "orange"
    },
    pointerBody: {
      fill: "orange"
    }
  };
}

<Flyout stylesheet={customStylesheet} 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>