Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub
Reakit is featured on Product Hunt!

Popover

Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import {
  usePopoverState,
  Popover,
  PopoverDisclosure,
  PopoverArrow
} from "reakit/Popover";

function Example() {
  const popover = usePopoverState();
  return (
    <>
      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
      <Popover {...popover} aria-label="Welcome">
        <PopoverArrow {...popover} />
        Welcome to Reakit!
      </Popover>
    </>
  );
}

#Accessibility

  • Popover extends the accessibility features of Dialog.
  • PopoverDisclosure extends the accessibility features of DialogDisclosure.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#usePopoverState

  • visible boolean

    Whether it's visible or not.

  • placement "auto-start" | "auto" | "auto-end" | "top-start...

    Actual placement.

  • unstable_fixed boolean | undefined

    Whether or not the popover should have position set to fixed.

  • unstable_flip boolean | undefined

    Flip the popover's placement when it starts to overlap its reference element.

  • unstable_shift boolean | undefined

    Shift popover on the start or end of its reference element.

  • unstable_gutter number | undefined

    Offset between the reference and the popover.

  • unstable_preventOverflow boolean | undefined

    Prevents popover from being positioned outside the boundary.

  • unstable_boundariesElement "scrollParent" | "viewport" | "window" | undefined

    Boundaries element used by preventOverflow.

#Popover

  • visible boolean

    Whether it's visible or not.

  • unstable_animated boolean | undefined

    If true, the hidden element attributes will be set in different timings to enable CSS transitions. This means that you can safely use the .hidden selector in the CSS to create transitions.

    • When it becomes visible, immediatelly remove the hidden attribute, then add the hidden class.
    • When it becomes hidden, immediatelly remove the hidden class, then add the hidden attribute.
  • hide () => void

    Changes the visible state to false

  • modal boolean | undefined

    Toggles Dialog's modal state.

    • Non-modal: preventBodyScroll doesn't work and focus is free.
    • Modal: preventBodyScroll is automatically enabled, focus is trapped within the dialog and the dialog is rendered within a Portal by default.
  • hideOnEsc boolean | undefined

    When enabled, user can hide the dialog by pressing Escape.

  • hideOnClickOutside boolean | undefined

    When enabled, user can hide the dialog by clicking outside it.

  • preventBodyScroll boolean | undefined

    When enabled, user can't scroll on body when the dialog is visible. This option doesn't work if the dialog isn't modal.

  • unstable_initialFocusRef RefObject<HTMLElement> | undefined

    The element that will be focused when the dialog shows. When not set, the first tabbable element within the dialog will be used.

  • unstable_finalFocusRef RefObject<HTMLElement> | undefined

    The element that will be focused when the dialog hides. When not set, the disclosure component will be used.

  • unstable_portal boolean | undefined

    Whether or not the dialog should be rendered within Portal. It's true by default if modal is true.

  • unstable_orphan boolean | undefined

    Whether or not the dialog should be a child of its parent. Opening a nested orphan dialog will close its parent dialog if hideOnClickOutside is set to true on the parent. It will be set to false if modal is false.

#PopoverArrow

  • placement "auto-start" | "auto" | "auto-end" | "top-start...

    Actual placement.

#PopoverBackdrop

  • visible boolean

    Whether it's visible or not.

  • unstable_animated boolean | undefined

    If true, the hidden element attributes will be set in different timings to enable CSS transitions. This means that you can safely use the .hidden selector in the CSS to create transitions.

    • When it becomes visible, immediatelly remove the hidden attribute, then add the hidden class.
    • When it becomes hidden, immediatelly remove the hidden class, then add the hidden attribute.

#PopoverDisclosure

  • disabled boolean | undefined

    Same as the HTML attribute.

  • focusable boolean | undefined

    When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

  • visible boolean

    Whether it's visible or not.

  • toggle () => void

    Toggles the visible state

  • unstable_referenceRef RefObject<HTMLElement | null>

    The reference element.