feat: usePopper Hook

[FezVrasta]

// @flow
import * as React from 'react';
import { usePopper } from 'react-popper';

const App = () => {
  const [referenceElement, setReferenceElement] = React.useState<?Element>(null);
  const [popperElement, setPopperElement] = React.useState<?HTMLElement>(null);
  const [arrowElement, setArrowElement] = React.useState<?HTMLElement>(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      { name: 'arrow', options: { element: arrowElement } },
    ],
  });

  return (
    <>
      <button ref={setReferenceElement}>Reference Element</button>
      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
        Popper Element
        <div ref={setArrowElement} style={styles.arrow} />
      </div>
    </>
  );
}

CodeSandbox demo:
https://codesandbox.io/s/cold-night-u1oji

[atomiks]

Looks great imo

[FezVrasta]

So, I suppose the PR is ready for a final review. (I need to fix the tests though)

[FezVrasta]

Tests fixed, I replaced Enzyme with react-testing-library since it seems to work better with modern React versions. I also added tests for the new hook.

[imballinst]

hi @FezVrasta, thank you for this amazing work! Question: why does in the CodeSandbox demo, the div for arrow is located below the popper instead of above the popper? Is this a bug from https://github.com/popperjs/popper-core?

I also face the same thing in my local, but I don't know whether it's because of this lib, upstream repository, or I'm configuring something wrong, though I copy-pasted exactly the same code like in the documentation for usePopper. Thanks again!

[atomiks]

@imballinst Popper only positions the arrow along a single axis in order to center it to the reference. For vertical placements it's the x axis. It's your responsibility to position it on the other axis in CSS.

[FezVrasta]

I’m sorry I’m from mobile so I can’t look into it, but make sure you are applying the correct CSS to position the arrow. Popper provides only the offset to center it. You can look at the popper.js.org tutorial

[imballinst]

@atomiks @FezVrasta Ah, okay! Got it. That should be enough as a clue for me. Thanks and sorry for the noise. Have a nice weekend!

[pleerock]

shouldn't useRef be used instead of useState for element references?

[FezVrasta]

useRef allows to react when the reference element changes identity.

[yuriy-sng]

Is the demo's

// FIXME: we probably need some logic in the hook to detect when the provided elements are null

still applicable? I'm having some issues setting referenceElement to null in my code.

[FezVrasta]

Is the demo's

// FIXME: we probably need some logic in the hook to detect when the provided elements are null

still applicable? I'm having some issues setting referenceElement to null in my code.

It should work with null elements

[sarathms]

The codesanbox example linked above doesn't seem to work anymore. This is what I see:

How to get it to work?

[FezVrasta]

It's working, it's just a silly example where the popper sits below the button 😅