Skip to content
Edit this page

Unstyled popper

The Popper component lets you create components that are displayed on top of other elements.

Features:

  • 🕷 Popper relies on the 3rd party library (Popper.js v2) for perfect positioning.
  • 💄 It's an alternative API to react-popper. It aims for simplicity.
  • The anchorEl is passed as the reference object to create a new Popper.js instance.
  • The children are placed in a Portal prepended to the body of the document to avoid rendering problems. You can disable this behavior with disablePortal prop.
  • The page scroll isn't blocked when the popper opens.
  • The placement of the popper updates with the available area in the viewport.

Caveats:

  • Clicking away does not hide the Popper component. If you need this behavior, you can use ClickAwayListener

Bundle size: 📦 8 kB gzipped.

Basic Popper

By default, the popper is mounted to the DOM when its open prop is set to true and removed from it when open turns false. If you want that to happen with a transition, use the keepMounted prop (see the Transition example below).

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<PopperUnstyled id={id} open={open} anchorEl={anchorEl}>
  <div
    style={{
      padding: '0.5rem',
      border: '1px solid',
      backgroundColor: '#fff',
      margin: '0.25rem 0px',
    }}
  >
    The content of the Popper.
  </div>
</PopperUnstyled>

Placement

The popper's default placement is bottom. You can change it using the placement prop. Play around with the interactive demo below to see the many possible values there are for it.

Placement value:
ANCHOR

API