Phoenix LiveView hook that reports a container's size to the LiveView (spec/10 §10).

ResizeHook is the round-trip half of responsive sizing (D-54): a ResizeObserver on the container pushes {width, height} once the size has held for the debounce period, so the server re-renders the chart at the container's pixel width. The CSS-scaled half needs no hook: Visualize.IR.Element.root/3 under responsive: true, or a component with responsive={true}, follows its container by viewBox and preserveAspectRatio.

Usage

<div id="chart-panel" phx-hook="ResizeHook" data-resize-event="resize">
  <.line_chart data={@data} x={& &1.at} y={& &1.value} width={@width} height={@height} />
</div>

def handle_event("resize", %{"width" => width, "height" => height}, socket) do
  {:noreply, assign(socket, width: width, height: height)}
end

Configuration

Data attributes on the observed element:

• data-resize-event - event name to push (default: "resize")
• data-resize-debounce - milliseconds the size must hold before it is pushed (default: 150)