React-popper: Allow to pass as Target an object.

[FezVrasta]

This would rely on:
https://popper.js.org/popper-documentation.html#referenceObject

[souporserious]

What would this look like? <Target reference={{...}}/>?

[FezVrasta]

Up to you, I have no idea 😝

[souporserious]

I guess I'm not sure how it would work? Like what would a use case be for this? Maybe the child function gives you clientWidth and clientHeight, etc.

[FezVrasta]

Possible use cases are:

• pop a popper on the mouse position
• pop a popper relative to a custom area (for instance, some guys used this to make a tooltip appear near a text selection)

[souporserious]

Interesting.. so what parts need to care about this? Is this something both Target and Popper would use? Or just Popper? Trying to figure out where this fits best.

[FezVrasta]

The idea is to not have a target dom node at all, the popper will be the only dom node

[FezVrasta]

Maybe:

<Manager targetObject={{ bla }}>
  <Popper />
</Manager>

[kumarharsh]

Another use-case which I felt a need for is:

Say, you have a filter which opens a dropdown which would be the width of the app-container, and bounded by the app-container. In this case, I'll have to find the app-container's reference and pass that as the target, instead of an element I need to render...

[TheSharpieOne]

Maybe:

<Manager targetObject={{ bla }}>
  <Popper />
</Manager>

Do you even need the manager? Couldn't you just pass it to Popper? Manager is really only connecting the Popper and Target so it doesn't make much sense without a DOM target rendered by Target. You would have to make the popperManager context not required and you could do something like:

<Popper target={{ bla }}/>

Also, this would work great if the target could be a DOM node or something else, allowing users to attach a popper to existing elements anywhere on the page. You could even add a helper to allow the target to be a string or something to select the target; if you wanted or leave that in user-land.

[ariroseonline]

@souporserious I'm looking into using react-popper, but the lack of followCursor makes it difficult to justify. Looks like there was a fork https://github.com/Gudahtt/react-popper/commit/9637b4d2611f0aae0989ba8bc3f1483fa73de122 which added support.

Is this safe to merge into master?

[Gudahtt]

Ah darn, I had meant to submit that as a PR but it slipped my mind. I'll review that tonight.

[ariroseonline]

@Gudahtt Thanks for helping out. I tried implementing your fork but ran into some problems in how to do it. E.g. Do you use a Manager? Does it it matter if you do or don't? What do you pass as the target prop in the case of trying to send the mouse position?

Might be help to submit with a bit of documentation :)

[Gudahtt]

@ariroseonline Absolutely. The lack of documentation updates is why I didn't submit it as a PR yet. I'm working on that now.

[kumarharsh]

@FezVrasta AWESOME!!!