Hook that adds a click listener outside of an element.

100%

Hook that adds a click listener outside of an element.

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Dec 30, 2021

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Hook that makes a DOM element draggable.

This example shows a React hook that makes any DOM element draggable by handling mouse events. The hook returns a ref to attach to the target element and a mouse-down handler; when the user presses and drags, it computes the new position from the initial click offset and calls a provided `onMove` callback with the updated coordinates. It uses React’s `useRef`, `useState`, `useEffect`, and `useCallback`, attaching global `mousemove` and `mouseup` listeners while dragging. The code relies on `getBoundingClientRect` to calculate the offset, enabling smooth, frame-accurate movement without external libraries.

Aabonello

73% match

Loading thumbnail…

A hook to listen for width changes or scroll-bar show/hide.

This example demonstrates a React hook that detects when a container’s width changes, such as when scroll bars appear or disappear. It shows how to trigger a callback on width resizes without relying on the window’s resize event. The hook creates a hidden iframe element styled to span the full container width, then listens for its `contentWindow`’s `resize` event. The initial width is captured immediately, and the listener is cleaned up on unmount. The code uses React’s `useEffect` and `useRef` APIs directly.

CCurran Kelleher

66% match

Loading thumbnail…

Hook that emits when the window has focus.

This example demonstrates a React hook that tracks whether the browser window currently has focus, returning a boolean value that updates in real time. It uses the `useState` and `useEffect` hooks from React to manage state and lifecycle events. The hook listens for the native `focus` and `blur` events on the `window` object, updating the state accordingly and cleaning up event listeners on unmount. It reads the initial focus state via `document.hasFocus()` and returns the current focus status, enabling components to react to visibility changes.

Aabonello

65% match

Loading thumbnail…

Hook that emits document visibility.

This example demonstrates a React hook that tracks whether the browser tab is currently visible to the user. It shows the document’s `visibilityState` and returns a boolean indicating if the page is in the foreground. The hook uses React’s `useState` and `useEffect` to initialize the state and subscribe to the `visibilitychange` event on the document. When the tab’s visibility changes, the event listener updates the state accordingly, and the effect cleans up the listener on unmount.

Aabonello

65% match

Loading thumbnail…

Hook that listens for bounding box changes on a DOM element.

This example shows a React hook that tracks the bounding box of a DOM element and returns its updated width, height, x, and y coordinates. It uses the native `ResizeObserver` API to listen for size changes and `getBoundingClientRect()` to capture the element’s position and dimensions. The hook stores the rectangle in React state via `useState` and updates it through a `useEffect` that observes the element referenced by a `MutableRefObject`. The code is written in TypeScript and defines a `toRect` helper to normalize the `DOMRect` output, ensuring default values when the element is not yet available.

Aabonello

64% match

Loading thumbnail…

Hook that returns the previous value.

This example demonstrates a custom React hook that retains and returns the previous value of a prop or state variable between renders. The hook uses `useRef` to store the current value and `useEffect` to update the ref whenever the value changes, while returning the ref’s previous value from the render. It is written in TypeScript and relies on React’s `useEffect` and `useRef` APIs, showing a common pattern for comparing current and prior values in component logic.

Aabonello

63% match

Loading thumbnail…

Hook that plays an audio file from a source URL.

This example demonstrates a React hook that controls audio playback from a URL, triggered by a boolean flag and configurable volume and loop settings. The hook creates an `Audio` object via the browser’s Web Audio API and manages its lifecycle with `useEffect`, playing when the flag is true and pausing on cleanup. It also listens for the `ended` event to invoke an optional completion callback. The code relies on React’s `useMemo` and `useEffect` hooks, showing a declarative approach to embedding sound in a visualization without visible UI.

Aabonello

62% match

Loading thumbnail…

A simple logging hook for React

This example shows a React logging hook that provides memoized console methods for component-level debugging. It exposes `useLogger`, `useDebugger`, and `useError` hooks, each returning a bound console function with a prefix. The code uses `useMemo` to cache the logger instances, and stores references to `console.log`, `console.error`, and `console.debug` to avoid React.DOM overriding them. The `logger` function returns a bound function via `Function.prototype.bind`, allowing services like Redux/Thunk to use the same logging utility. No data source or rendering is involved.

Aabonello

62% match