{"version":"1.0","type":"rich","title":"Hook that adds a click listener outside of an element.","description":"This example demonstrates a React hook that detects clicks outside a referenced element. It returns a ref to attach to a component, and when a click event occurs, it checks whether the event target is contained within that element. If not, it invokes a callback. The hook uses React’s `useRef`, `useCallback`, and `useEffect` to manage the reference and listener, adding a document-level click listener and cleaning it up on unmount. The callback and its dependency list are passed as arguments, allowing flexible, memoized behavior.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-c2d5b883141aeaa7e285d32f985552eb?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}