DEV Community

Cover image for React Recipe app
Asad Choudry
Asad Choudry

Posted on

React Recipe app

  1. react-onclickoutside An important rule of UI design is to evaluate as many of the user’s entries as possible that were made with seriousness. This should be clear to everyone, and yet it can sometimes be difficult to implement something like this as code. A conceivable example would be a menu that was collapsed by the user. If you want to close it again, 90% of users tend to simply click on “dead” areas of the website (i.e. on elements that will not react themselves). On almost all professional websites, this is exactly the same. To close the menu, you just click next to it again instead of directly on it to toggle it. One library to react to such intentions is react-onclickoutside, which allows us to handle click events outside our actual element. In the following example, you can see how we can implement this for a simple h1 and button. Only when you click on anything but the two, the console.log is output. The function to handle exactly this event must be

Top comments (0)