React Popper 2.×

The second major version of react-popper brings compatibility with Popper 2.x and introduces a new React Hook to use the library with modern React patterns.

Don't mind tech-related ads? Consider disabling your ad-blocker to help us!
They are small and unobtrusive.
Alternatively, support us on Open Collective!

Install

Via package managers:

# With npm
npm i react-popper @popperjs/core

# With Yarn
yarn add react-popper @popperjs/core

Note: @popperjs/core must be installed in your project in order for react-popper to work.

Via script tag (UMD library exposed as ReactPopper):

<script src="https://unpkg.com/react-popper/dist/index.umd.js"></script>

Example

import React, { useState } from 'react';
import { usePopper } from 'react-popper';

const Example = () => {
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const [arrowElement, setArrowElement] = useState(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
  });

  return (
    <>
      <button type="button" ref={setReferenceElement}>
        Reference element
      </button>

      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
        Popper element
        <div ref={setArrowElement} style={styles.arrow} />
      </div>
    </>
  );
};

Note: the usePopper hook intentionally takes the DOM node, not refs, in order to be able to update when the nodes change. A callback ref is used here to permit this behaviour, and useState is an appropriate way to implement this.

Edit this page

React Popper

Hook