search

everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
907 stars 47 forks source link

Docs: example of useHover and useToggleLayer together #27

Closed mtmacdonald closed 4 years ago

mtmacdonald commented 4 years ago

Is it possible to have a documentation example of using useHover and useToggleLayer together? I could only find examples of each separately, and wasn't able to work out how to use both together. E.g. the tooltip example shows useHover with ToggleLayer but not useToggleLayer.

https://codesandbox.io/s/tooltip-pt2en?fontsize=14

(also, as feedback, I think the the Tooltip example could illustrate the point more clearly to newcomers if it were simpler, for example without framer-motion or styled components.)

everweij commented 4 years ago

Hi @mtmacdonald, thanks for reaching out! Always helpful to get some feedback. I've been asked a couple of times now how and when to use useToggleLayer. So maybe it would indeed be a good idea to create some kind of tutorial / quick start where I show how to build a minimal tooltip (plain html / css with no 3rd party libs). It could contain two versions; one using <ToggleLayer />, and one using useToggleLayer. This way, newcomers would also get a sense of the differences between the two. How does that sound?

mtmacdonald commented 4 years ago

That sounds super, thank you so much!

everweij commented 4 years ago

Hi @mtmacdonald, I finally had some time this weekend to look at some of your issues. I've updated some of the documentation around useHover and 'Getting started' (not entirely what I want it to be, but hopefully it's in the right direction). I also added a utility hook which combines 'useHover' with 'useToggleLayer'. This way I hope it's a bit more straightforward for newcomers who want to create a simple tooltip. Let me know if you have any thoughts on this ;)

Edit: updated useHover and added useTooltip are on the v0.7.1 release