Popper

A Popper can be used to display some content on top of another. It's an alternative to react-popper.

Some important features of the Popper component:

🕷 Popper relies on the 3rd party library (Popper.js) for perfect positioning.
💄 It's an alternative API to react-popper. It aims for simplicity.
📦 Less than 10 KB gzipped.
The children is Portal to the body of the document to avoid rendering problems. You can disable this behavior with disablePortal.
The scroll and click away aren't blocked like with the Popover component. The placement of the popper updates with the available area in the viewport.
The anchorEl is passed as the reference object to create a new Popper.js instance.

Simple Popper

Scroll playground

Scroll around this container to experiment with flip and preventOverflow modifiers.

Appearance

Placement

Disable portal (the children stay within it's parent DOM hierarchy)

Modifiers (options from Popper.js)

Prevent overflow

Flip (flip the popper’s placement when it starts to overlap its reference element)Arrow

<Popper
  placement="bottom"
  disablePortal={false}
  modifiers={{
    flip: {
      enabled: true,
    },
    preventOverflow: {
      enabled: true,
      boundariesElement: 'scrollParent',
    },
    arrow: {
      enabled: false,
      element: arrowRef,
    },
  }}
>

Positioned Popper

Without transition Popper

Faked reference object

The anchorEl property can be a reference to a fake DOM element. You just need to create an object shaped like the ReferenceObject.

Highlight part of the text to see the popper:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

Render Props

It is a render props demo that keeps track of the local state for a single popper.

Complementary projects

For more advanced use cases you might be able to take advantage of:

PopupState helper

There is a 3rd party package material-ui-popup-state that takes care of popper state for you in most cases.

API

<Popper />