jasonkuhrt / react-popover

A smart popover component for React
600 stars 253 forks source link

Tooltip body as a function #162

Open oyeanuj opened 6 years ago

oyeanuj commented 6 years ago

Hi @jasonkuhrt, this is a relatively small proposal compared to all the other big things in line for this library.

I was wondering if you've considered having the body prop be a function in addition to being an element or node. This gives the added advantage that those aren't rendered until the body is needed (especially when they require an async request).

Thank you for all your work on this library!

jasonkuhrt commented 6 years ago

Hey @oyeanuj this sounds interesting. Have you come across some use-cases where this would have been nice to have? Please share if so!

oyeanuj commented 6 years ago

Absolutely. A couple of places where I have it is say hovering over a user's avatar, I want to show the summarized user profile but that might mean image or video loading or XHR calls. Ideally, I'd delay that until the user asks for it rather than loading all the media or XHR calls all at once.

jasonkuhrt commented 6 years ago

@oyeanuj Can you provide a minimal motivating code sample? I don't understand why we cannot simply show a loading state in the popover body, or content, depending on the prop values of a wrapper component.

-- edit I've been out of the loop re rendering advancements. For example I still need to catch up on the concept of render props. Feel free to enlighten me if something is relevant to this issue.

oyeanuj commented 6 years ago

@jasonkuhrt no worries. it is basically the render prop pattern. The render prop pattern tends to use the render as the prop literally whereas this library could continue using the body prop.

So instead, of

<Popover body = { this.renderUserInfo() } >PopoverTrigger</Popover>

and have the body be executed on every re-render or pre-maturely and then have to maintain state to know when it is actually really being displayed.

one could do:

<Popover body = { this.renderUserInfo }> PopoverTrigger</Popover>

and the function is only called (if at all) when the Popover is actually triggered. In the Popover code, the only change would be to see if body is a function, in which case you render the called function instead of just rendering the body like it happens today.

Thoughts?