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

100%

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

✓ Published0🌍 Public

Last edited Jul 22, 2019

Created on Jul 22, 2019

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.

AI-generated description

Similar vizzes

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

63% match

Loading thumbnail…

[06] Responsive Chart Components with ResizeObserver - Using React Hooks with D3

A bar chart demonstrates responsive sizing with React and D3, using a custom `useDimensions` hook with `ResizeObserver` to track container dimensions. The component re-renders axes and bars whenever the wrapper resizes, computing `scaleBand` and `scaleLinear` scales from the observed width and height. Interactive buttons adjust, filter, or append data, while the chart animates transitions via D3's `transition` method. A draggable button resizes the container, triggering the observer. Styling uses inline SVG with CSS transforms, and tooltips appear on hover with `mouseenter` events.

Ggjonor

61% match

Loading thumbnail…

useEffect

This example demonstrates the React useEffect hook by showing how a web application responds to user-triggered state changes. Three buttons—Posts, Users, and Comments—update a resource type displayed as a header, while the hook logs lifecycle events to the console on mount, on resource change, and during cleanup. The code uses React 16.9.0 with the useState and useEffect APIs directly from the React and ReactDOM UMD builds, and it renders the interface into a root div using ReactDOM.render.

RRichard Burd

60% match

Loading thumbnail…

React Starter

This React Starter example demonstrates how to resize an SVG element by adjusting a wrapper div's dimensions through button clicks. The application uses React's `useState` and `useRef` hooks alongside D3's `select` to read and update CSS width values dynamically. A `d3.select` call retrieves the element's current width, which increments or decrements by 50 pixels with each button press. The rendered SVG fills the container with a light gray background, showing a minimal integration of React state management with D3 utilities for DOM manipulation and styling.

Ggjonor

60% match

Loading thumbnail…

Fork of [06] Responsive Chart Components with ResizeObserver - Using React Hooks with D3

A responsive bar chart built with React and D3 v5 updates its axes and bar geometry whenever the container resizes, using a custom `useDimensions` hook with `ResizeObserver`. The chart reads dimensions from the wrapper’s `contentRect`, then redraws with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisRight`, animating bar heights via `transition`. D3’s `join` binds data for mouseenter tooltips and color scales. A draggable resize control adjusts the root width, triggering live updates.

Llusinetsatinyan

60% match

Loading thumbnail…

Fork of React Starter

This example demonstrates scroll-driven scaling: a sticky sky-blue box grows from 50% to 100% scale as the page scrolls through a 200vh wrapper. The App component tracks scroll progress via a `window.scrollY` event listener, computes a percentage from the scroll position relative to the wrapper’s total height, and applies the result as an inline `transform: scale()` style. It uses React’s `useState`, `useEffect`, `useRef`, and `useCallback` hooks, with rendering handled by `createRoot`.

MMTR

60% match

Loading thumbnail…

Get window width on resize

This example demonstrates a debounced window resize handler that logs the current viewport width to the console after user resizing stops. It shows how to throttle repeated resize events using the native `window.addEventListener` and `setTimeout`/`clearTimeout` APIs, with a configurable delay of 100 milliseconds. The code wraps a custom `originalResize` callback within an immediately-invoked function expression (IIFE) that manages the debounce timer. No external libraries or rendering techniques are used; the implementation relies solely on plain JavaScript and the browser’s `innerWidth` property.

CChrisb4

60% match

Loading thumbnail…

React Custom Hook

This example presents a React-based dashboard for exploring an RSS feed. It displays a list of tree entries fetched from the Cabin Quest API and provides a button that opens the associated website in a new window. The visualization uses a custom hook, `useCabinQuest`, which relies on React's `useReducer` and `useEffect` to manage state and asynchronously fetch data via `fetch`. The interface is styled with CSS, and the data updates through the hook's dispatch actions.

Bbrandon flowers

60% match