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.

score 4 · Answer 1 · answered Mar 29 '19 at 11:04

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

@Bekinass Thank you for giving a clear understanding about the API Levels. — tkamath99, Sep 29 '21 at 06:24

score 3 · Answer 2 · answered Mar 28 '19 at 16:56

3

Don't bother too much with the render props. In most of the cases, you won't need to modify them.

Just keep in mind that

ref render prop from Reference should be attached to the reference element (your item where is attached your popper).
ref render prop from Popper should be attached on the popper (your tooltip or whatever).

style and placement render prop is for the geographical position on the page.

In resume, this example will render a button with an arrowed popperized <div> which contains "Popper element".

answered Mar 28 '19 at 16:56

samb102

1,104
5
13

thanks a lot again. could you give a minimal example of how this would look like in practice / in code? My level is pretty basic and I am stuck, not sure how to wire this together. – R. Kohlisch Mar 28 '19 at 16:57
1

Unfortunately, the example you gave is close to be the simpliest example that may exists. The only optional "thing" is the `arrowProps` and its rendering `
`.
– samb102 Mar 28 '19 at 17:00
Thanks! How would I use this code though? Just like so `import Example from './Example.js'; //then in my render: ` ? – R. Kohlisch Mar 28 '19 at 17:03
1

No, you didn't get it. This code is not re-usable with an export. Copy its skeleton when you wanna popper something. In `Reference`, instead of the example `button`, put your reference element. In `Popper`, instead of the flying text `"Popper element"`, put the element you want to popper. – samb102 Mar 28 '19 at 17:08

How to use react-popper with render props

2 Answers2