Popover

A light muffin made from a thin batter, which rises to form a hollow shell when baked.

Example

import Popover from '@wedgekit/popover';

const Test = () => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef();

  return (
    <div>
      <Button ref={ref} onClick={() => setOpen(true)}>
        Open Popover
      </Button>
      {open && (
        <Popover node={ref.current} onExit={() => setOpen(false)}>
          <div
            style={{
              padding: '24px',
              backgroundColor: 'white',
              fontSize: '16px',
              'border-radius': '4px',
            }}
          >
            Here is some content.
          </div>
        </Popover>
      )}
    </div>
  );
};

render(<Test />);

Props

children

The popover content; can be a string or JSX

Type: ReactNode

Required: ✅

node

The current ref of the DOM node that the popover is positioned in relation to

Type: HTMLElement

Required: ✅

onExit

A callback which fires when an exit action is taken; this should generally be used to unmount the popover.

NOTE: The event which triggered the exit callback is passed as an argument, so if you want to refine which events close the popover, you can simply choose not to unmount it.

Type: (e: SyntheticEvent<unknown>) => void

Required: ✅

bearings

The bearings prop defines how the popover is positioned relative to the node.

The bearings prop has four properties: side, align, offset and fallback:

• side defines the position of the popover in relation to the node; it defaults to bottom
• align defines how the popover aligns with the node; it defaults to start
• offset defines the distance of the popover from the node; it defaults to 16px
• fallback provides an alternate side and align if the popover is falling off the page; if absent the popover will be adjusted until it no longer overhangs the page - possibly covering the node

The following illustrates the interaction of side and align:

Type: Bearings

type Align = 'start' | 'center' | 'end';
type Side = 'top' | 'bottom' | 'left' | 'right';

type Bearings = {
  align: Align;
  side: Side;
  offset: number;
  fallback?: [Side, Align];
};

Required: ❌

Default:

{
  align: 'start',
  side: 'bottom',
  offset: 16,
}

className

A string identifier for a CSS class. className should generally not be used directly; it is provided in order to make styled-components work correctly.

Type: string

Required: ❌

ref

If consuming code needs to track changes within the popover, they may pass in a ref. Note that this is different than the 'node' prop, which is passed in so the popover can position itself.

node: popover tracks an element in the consuming code. ref: the consuming code has access to the popover

Type: React.Ref<HTMLDivElement>

Required: ❌

autoUpdatePosition

If true the popover will automatically reposition itself when it's parent is resized or scrolled. Additional documentation here https://floating-ui.com/docs/autoUpdate

Type: boolean

Required: ❌