Pass target directly to popper

[Gudahtt]

Allows passing in a target prop to the Popper component directly, bypassing the need for the Manager and Target components. I implemented this feature for personal use initially, as it was needed in the development of a custom UI library.

The documentation and examples have been updated. I did try to make clear that the Manager and Target pattern is recommended and easier to use, and should be preferred in most cases.

It was challenging to think of a good example for this feature. I saw two options; get a ref and use that, or get an element directly from the DOM. I didn't want to do the latter, because it's generally recommended to avoid that when using React. But the ref was problematic as well. If I just grabbed a ref and used it right away, the resulting component would fail to pass in a target prop on the first render, because the ref doesn't get called until after the child component mounts. I considered briefly just using forceUpdate to trigger a second render in componentDidMount, but that was too confusing for an example.

Instead, I side-stepped the issue by writing an example that defaulted to not showing the popper component at all. That avoids the ref issue, because the popper is always hidden on first render, so it doesn't need to be shown. However, this gave me another concern - that people would look at the README for a quick example of how to make an open/close-able popover and grab that example without considering whether using Manager would suit their use case better. So to avoid that circumstance, I also added an example doing the same thing with Manager and Target first.

[FezVrasta]

Does this support to pass an object as reference element?

[Gudahtt]

This supports passing a DOM Element. That's the same thing a React ref callback would get you, or a call to document.querySelector or whatnot. It's the same thing that the Target component currently passes to the Manager, which passes it to Popper.

Is there another possible input that we should support? I hadn't thought of any other use cases.

[FezVrasta]

https://popper.js.org/popper-documentation.html#referenceObject

[Gudahtt]

Interesting; I didn't know about those.

I suspect the only thing stopping this change from being compatible with referenceObjects is the PropType validation. That's an easy change to make - I'll do that and test it this evening.

[Gudahtt]

The target prop now supports being passed a Popper referenceObject.

I also did some cleanup, mostly around lints and organization conventions that were different from when I originally branched.

[taras]

Allows passing in a target prop to the Popper component directly, bypassing the need for the Manager and Target components.

I'm glad I looked in Pull Requests because this is exactly what I needed. I was considering not using react-popper because reliance on context requires the target and popper to be rendered in the same context. In my case, I want to render the popper in a component that receives the target via a callback.

I considered briefly just using forceUpdate to trigger a second render in componentDidMount, but that was too confusing for an example. Instead, I side-stepped the issue by writing an example that defaulted to not showing the popper component at all. That avoids the ref issue, because the popper is always hidden on first render, so it doesn't need to be shown.

I'm using the same pattern in my application. Controlling rendering of the popper based on state makes popper more composable and flexible for more complex scenarios. 👍

[Justkant]

I used to do the same because of some older version of react-portal that was making the use of the context impossible, not a problem anymore from my side.
It's a nice addition to the package

[flessard]

Any idea when you plan to merge this PR ?
Thanks :)

[ahx]

I have tried this, but the position did not seem to change when the the target prop is changed.
Could someone confirm that it works for them when changing target dynamically (or confirm that it does not work for them as well)?

[Gudahtt]

@ahx I think you're right. I'll look at fixing this now.

[Gudahtt]

I believe it should update now when the target changes. Let me know if it works. Thanks.

[ahx]

@Gudahtt It works as expected, thank you! react-popper is much easier to use for us now. I really like this PR. 👍