react-popper
react-popper copied to clipboard
floating-ui
Documentation could use more examples
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?
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.
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.
On it.
On Thu, Apr 30, 2020 at 10:53 AM Federico Zivolo [email protected] 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 .
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.
Check out my article. I explain just that.
On Thu, May 7, 2020, 7:51 AM Federico Zivolo [email protected] 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 .
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 [email protected] 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 .
I don't know why they use useState in the docs at all in the place of a ref lol. Complete nonsense.
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
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.
Yes, more docs please. Haven't gotten hooks to work. https://codesandbox.io/s/peaceful-grothendieck-gw6zy?file=/src/App.js
@ywtstewart your example is working, I'm not sure what you expect it to do...
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.