Hook that emits document visibility.

100%

Hook that emits document visibility.

✓ Published0🌍 Public

Last edited Jun 25, 2021

Created on Dec 30, 2021

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.

AI-generated description

Similar vizzes

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

78% match

Loading thumbnail…

Hook that toggles a boolean state.

This example demonstrates a React hook that manages a boolean state and provides a toggle function. It shows how to initialize the state with a default value and update it based on an optional argument. The code uses `useState` to hold the boolean and `useCallback` to memoize the toggle callback, which flips the previous state unless a boolean value is explicitly passed. The hook returns the current state and the callback as a tuple, enabling flexible state control in components.

Aabonello

67% 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 adds a click listener outside of an element.

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.

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

63% match

Loading thumbnail…

Hook that debounces useState() changes.

This React hook demonstrates how to debounce state updates from `useState` by wrapping the setter in a custom `useStateDebounce` function. It uses `useCallback`, `useRef`, and `useEffect` to manage a `window.setTimeout` and `window.clearTimeout` pair, delaying the `setState` call by a specified `ms` interval. The hook accepts an initial state value and returns the debounced state and setter, preventing rapid re-renders from frequent input changes. The example is implemented as a TypeScript `.tsx` file, showing the logic in isolation without external data sources or visualization libraries.

Aabonello

62% 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…

Hook that increments a counter every time useState() is changed.

This example demonstrates a React hook that tracks how many times a component’s state value is updated. The hook, `useStateCount`, returns both the current value and an incrementing counter that increases each time `setValue` is called. It uses React’s `useState` to store a tuple of `[count, value]` and `useCallback` to memoize the update function, depending on the current count. The code is written in TypeScript and shows a pattern for monitoring state changes without external libraries, relying solely on React’s built-in hooks.

Aabonello

61% match