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

100%

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

✓ Published0🌍 Public

Last edited Sep 29, 2021

Created on Dec 30, 2021

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.

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

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

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

70% match

Loading thumbnail…

Hook that records the history of state changes as an Array buffer upto a certain length.

A React hook records state changes as an array buffer capped at a specified length. The hook initializes with a single state value and appends each new update, trimming older entries to maintain the size limit via array slicing. It uses React’s `useState` to store the history and `useCallback` to memoize the update function. This example demonstrates a generic TypeScript utility for tracking state evolution, with no rendering or visualization logic included.

Aabonello

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

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

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

63% match

Loading thumbnail…

React Starter

This example demonstrates how to integrate React with D3 by building a resizable SVG container. A draggable div wrapper, observed via ResizeObserver, updates the SVG’s width and height state through a custom React hook (useState, useEffect) and D3’s drag behavior. The visualization shows the interplay between React’s declarative rendering and D3’s imperative event handling. It uses React 16, ReactDOM, d3.select, d3.drag, and d3.event to log and apply dynamic size changes.

Ggjonor

62% match