How to use react-popper with render props

Question

I am a beginner, trying to understand react-popper. On their github, this is the example code:

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference element
        </button>
      )}
    </Reference>
    <Popper placement="right">
      {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
          Popper element
          <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
      )}
    </Popper>
  </Manager>
);

Is this as it stands there supposed to be working? I am not sure I understand how I could use this code, how it would look like if I were to import/use this Example Component into my own parent component; Would I need to pass refs? How so? It would be great if somebody could give me a working example of this code, I'd just like to see how to make use of this.

Answer 1

I am guessing that you aim for a tooltip-like functionality. Is it what you are trying to achieve ?

Bear in mind that react-popper has a low level API. It is a positional engine rather than a tooltip library. By using it you would have to implement the logic of displaying the Popper yourself. For instance you could have a variable shouldShowElement and trigger changes to this

  ...
  <Manager>
    <Reference>
      {({ ref }) => (
        <button
          type="button"
          ref={ref}
          onMouseEnter={() => {
            /* [[SOME CODE TO SET shouldShowElement TO TRUE]] */
          }}
          onMouseLeave={() => {
            /* [[SOME CODE TO SET shouldShowElement TO FALSE]] */
          }}
        >
          Reference element
        </button>
      )}
    </Reference>
    {shouldShowElement ? (
      <Popper placement="right">
        {({ ref, style, placement, arrowProps }) => (
          <div ref={ref} style={style} data-placement={placement}>
            Popper element
            <div ref={arrowProps.ref} style={arrowProps.style} />
          </div>
        )}
      </Popper>
    ) : null}
  </Manager>
  ...

If you want a more high-level API you can use react-tippy or react-popper-tooltip