useOutsideClick custom hook can be used to determine if a click event was triggered outside of the target element's boundary. Create a function called useOutsideClick that triggers a toast if a click event is triggered outside of a centered div element.
useOutsideClick
that takes in two parameters - ref
and callback
.ref
is the reference to the central div
element. Use useRef()
for creating refs.callback
parameter is the function that gets triggered if a click event occurs outside
of the desired div element.div
- do nothing. That means, there should be NO toast displaying on the screen.div
- show a toast / console log "Clicked outside" text to notifiy the end user that the click was triggered outside.Click to reveal
Try using useRef()
and assign the div the ref
attribute for which you want to implement outside click functionality.
Click to reveal
A custom hook has to have a useEffect()
that gets triggered inside of a custom hook. A custom hook is essentially a function / component that has a standalone logic - which can be reused anywhere and everywhere required.