dash.onResize

Run a callback when the pane’s size changes, for example to redraw a chart or switch to a compact layout.

dash.onResize(cb: (size: DashSize) => void): () => void

interface DashSize {
  cols: number;
  rows: number;
  width: number;
  height: number;
}

Example

Use a compact layout when the pane is narrow. The first call reads the frame’s own width, because onResize is not called when the pane starts.

let compact;

function layout(width) {
  const next = width < 240;
  if (next === compact) return;
  compact = next;
  document.body.classList.toggle('compact', compact);
}

layout(window.innerWidth);
dash.onResize((size) => layout(size.width));

The size

Field	What it holds
cols	The pane’s width in grid columns.
rows	The pane’s height in grid rows.
width	The width of the pane’s frame in CSS pixels, as a whole number.
height	The height of the pane’s frame in CSS pixels, as a whole number, not counting its title bar.

Behaviour

• The callback runs when you resize the pane on the canvas, when the canvas itself gets wider or narrower (for example when you resize the browser window), and in the editor when you pick another preview size. The frame is not reloaded.
• It is not called when the pane starts. Lay the pane out with CSS, or read window.innerWidth and window.innerHeight, for the first size.
• It can be called again with a size that has not changed. Compare with the last size before doing slow work, as in the example.
• On a narrow screen the canvas shows panes in one column at full width. cols and rows still give the pane’s size on the grid, and width is the width it is shown at.
• Each callback gets its own copy of the size object.
• onResize returns a function that removes the callback.

Errors

dash.onResize throws a DashError straight away in one case:

Code	Why
VALIDATION_FAILED	cb is not a function.

An error thrown inside cb is reported like any uncaught error in the pane. On a canvas the pane then shows “This pane stopped” with a Reload button.