Hook that emits when the window has focus.

100%

Hook that emits when the window has focus.

✓ Published0🌍 Public

Last edited Jun 25, 2021

Created on Dec 30, 2021

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.

AI-generated description

Similar vizzes

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

78% 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

68% 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

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…

useResponsive

This example demonstrates a React hook that tracks the browser viewport width in real time. It shows how components can adapt their layout based on the current window size, updating whenever the user resizes the browser. The code uses the `useState` and `useEffect` hooks from React, along with a `resize` event listener on the `window` object. The hook returns an object containing the current `width` value, which is initially undefined and then populated with `window.innerWidth` on mount and subsequent resize events. The implementation closely mirrors a `useWindowSize` hook, but only tracks width rather than both dimensions.

LLandoLabrum

65% 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

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 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

62% match