usePaperScroller()

function usePaperScroller(paperId?): PaperScrollerApi;

Imperatively controls a paper's <PaperScroller>: returns the underlying ui.PaperScroller view plus startPaperPan, setZoom, and zoomToFit helpers for building zoom buttons, fit-to-screen, and custom panning.

The returned object is stable; paperScroller is null until the paper / <PaperScroller> has mounted, and the helper methods no-op while it is. For reactive zoom / viewport state that re-renders on change, use usePaperScrollerViewport instead.

Parameters

Parameter	Type	Description
paperId?	string	Paper id, or omit to use the current <Paper> context (falling back to the default paper).

Returns

A PaperScrollerApi.

paperScroller

readonly paperScroller: PaperScroller | null;

The ui.PaperScroller view, or null until the paper/scroller has mounted.

---

setZoom

readonly setZoom: (value, options?) => void;

Sets the current zoom level. Accepts either an absolute number or an updater function that receives the previous zoom and returns the new value (React setState-style). The result is clamped to the minZoom / maxZoom props of the registered <PaperScroller>. No-op when no paper scroller is registered.

Parameters

Parameter	Type	Description
value	number | ((previous) => number)	Absolute zoom or an updater (prev) => next.
options?	SetZoomOptions	Optional zoom anchor (ox, oy).

Returns

void

Example

setZoom(1);                       // 100%
setZoom((prev) => prev * 1.1);    // 10% in
setZoom((prev) => prev / 1.1);    // 10% out

---

startPaperPan

readonly startPaperPan: (event) => void;

Programmatically start a pan from a pointer event. No-op when no paper scroller is registered for the current paper.

Parameters

Parameter	Type	Description
event	Event | MouseEvent | TouchEvent	Pointer/mouse/touch event that initiated the pan.

Returns

void

---

zoomToFit

readonly zoomToFit: (options?) => void;

Scales and scrolls the paper so the whole graph fits inside the visible viewport, centred and clamped to the registered <PaperScroller> zoom bounds. No-op when no paper scroller is registered.

Parameters

Parameter	Type	Description
options?	ZoomToFitOptions	Fit tuning: contentMargin plus scale-content options (alignment, min/max scale) forwarded to the underlying zoomToRect call. See ZoomToFitOptions.

Returns

void

Example

import { usePaperScroller } from '@joint/react-plus';

// Mount inside a <PaperScroller> to drive its zoom.
function ZoomControls() {
  const { setZoom, zoomToFit } = usePaperScroller();
  return (
    <>
      <button onClick={() => setZoom((zoom) => zoom * 1.2)}>Zoom in</button>
      <button onClick={() => setZoom((zoom) => zoom / 1.2)}>Zoom out</button>
      <button onClick={() => zoomToFit()}>Fit</button>
    </>
  );
}