React-popper: Documentation could use more examples

[tannerhallman]

I created a dev.to post on a dropdown component where it uses the new recommended hook usePopper and I had an awfully hard time getting the example on the docs to work. If I was to PR some additions to the docs with a dropdown example, would that be accepted?

Code sandbox

[FezVrasta]

Hi! Yes it'd be great, the documentation source code is at https://github.com/popperjs/website, please do let me know if you need any guidance.

[FezVrasta]

FYI I'm getting a runtime error on your sandbox

[tannerhallman]

Fixed it. Thank you. Some weird caching issue with old versions.

I'll get something PR'd this week.

[FezVrasta]

It'd be cool if you followed the style we used for the vanilla tutorial https://popper.js.org/docs/v2/tutorial/

Ideally, a 1:1 transposition to React of that tutorial would be the best.

[tannerhallman]

On it.

On Thu, Apr 30, 2020 at 10:53 AM Federico Zivolo [e-mail]
wrote:

It'd be cool if you followed the style we used for the vanilla tutorial
https://popper.js.org/docs/v2/tutorial/

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/popperjs/react-popper/issues/359#issuecomment-621905012,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACOZLQ675EL4RZHXILFMHSLRPGGH7ANCNFSM4MVSYMAA
.

[ghost]

How do you actually use this with React? The vanilla JS docs are there but the React docs are lacking and it has a dead link. The repo itself has a demo folder with premade components so the usage is completely abstracted. Looking for more on the usePopper hook.

[ghost]

Is there a way to close the popper when the user clicks outside?

[FezVrasta]

@jibberishclient no, Popper is not a tooltip library.

[tannerhallman]

Check out my article. I explain just that.

On Thu, May 7, 2020, 7:51 AM Federico Zivolo [e-mail]
wrote:

@jibberishclient https://github.com/jibberishclient no, Popper is not a
tooltip library.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/popperjs/react-popper/issues/359#issuecomment-625207466,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACOZLQ77KRM2ORGNZTNVRYTRQKOFVANCNFSM4MVSYMAA
.

[ghost]

Why is useState used instead of useRef?

[tannerhallman]

Docs show useState, I ended up using useRef because I didn't have the time
to figure out why useState wasn't working.

I'm trying to get to a PR this week adding my code from the article to the
docs for those folks after us.

On Thu, May 7, 2020, 10:30 AM Jibberish Client [e-mail]
wrote:

Why is useState used instead of useRef?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/popperjs/react-popper/issues/359#issuecomment-625290524,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACOZLQ7K477KE6CU6F72MT3RQLAYLANCNFSM4MVSYMAA
.

[ghost]

I don't know why they use useState in the docs at all in the place of a ref lol. Complete nonsense.

[FezVrasta]

I don't know why they use useState in the docs at all in the place of a ref lol. Complete nonsense.

Yeah, it's complete nonsense:

[...] useRef is the wrong thing to use when you need to be updated when they change. Instead you should use a "callback ref" (react's confusing name not mine).

[..]

references:
https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
https://twitter.com/sebmarkbage/status/1091808948523581440

Source | https://github.com/popperjs/react-popper/issues/241#issuecomment-591411605

[ghost]

Relative to the popper instance nothing is changing, so a ref should be totally fine. Furthermore, I would imagine the ref prop expects a ref object with a current field so how can we be so sure state will work as expected?

Might be more useful to have a declarative API that follows something like blueprint's popper, have a Popper component which parses two children the first being the target and the second being the content instead and allow additional props.

[ywtstewart]

Yes, more docs please. Haven't gotten hooks to work.
https://codesandbox.io/s/peaceful-grothendieck-gw6zy?file=/src/App.js

[FezVrasta]

@ywtstewart your example is working, I'm not sure what you expect it to do...

[ghost]

https://codesandbox.io/s/twilight-bash-h6ruv?file=/src/App.js

Is there a way to edge align the popper and the target button? I know I can use "placement" but I want it to be smart enough to know when the target button is right aligned or left aligned and act accordingly if that makes sense.