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, reduced_motion} once the size has held for the debounce period, so the server re-renders the chart at the container's pixel width — and, while reduced_motion is true (prefers-reduced-motion: reduce, pushed again whenever it changes), compiles it with motion: :reduce (spec/14 §21.6). 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} = params, socket) do
  motion = if params["reduced_motion"], do: :reduce, else: :full
  {:noreply, assign(socket, width: width, height: height, motion: motion)}
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)
• data-resize-target - the phx-target the event is pushed to with pushEventTo, so a LiveComponent can host the hook, as the chart builder's graph does (spec/14 §18.4); absent, the event goes to the LiveView