javascript - How to use react-popper with render props - Stack Overflow

admin管理员组

文章数量:1300019

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 ponent; 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.

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 ponent; 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.

• javascript
• reactjs
• popper.js
• react-popper

Share Improve this question Follow edited Mar 28, 2019 at 16:52 R. Kohlisch asked Mar 28, 2019 at 16:41 R. KohlischR. Kohlisch 2,99377 gold badges3333 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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".

本文标签： javascriptHow to use reactpopper with render propsStack Overflow