usePaper()

function usePaper(paperId?): PaperApi;

Access the JointJS paper (dia.Paper) instance for the surrounding <Paper>, a specific paper by id, or the default paper. Use it to drive the paper imperatively, scale, fit content, or wake it up, from anywhere under a GraphProvider.

The returned object is referentially stable for a given resolved paper; its paper is null until the <Paper> view has mounted, so guard calls with paper?..

Parameters

Parameter	Type	Description
paperId?	string	An explicit paper id, or omitted for the context/default paper.

Returns

The PaperApi: the resolved paper (or null) plus wakeUp, freeze, and unfreeze actions.

freeze

readonly freeze: () => void;

Suspend view updates so edits don't repaint until PaperApi.unfreeze. Forwards to paper.freeze(). No-op when the paper isn't resolved yet.

Returns

void

See

paper.freeze()

---

paper

readonly paper: PaperView | null;

Resolved JointJS paper instance, or null until a <Paper> has mounted.

---

unfreeze

readonly unfreeze: () => void;

Resume view updates and flush everything queued while frozen. Forwards to paper.unfreeze(). No-op when the paper isn't resolved yet.

Returns

void

See

paper.unfreeze()

---

wakeUp

readonly wakeUp: () => void;

Trigger a render pass on the paper. Forwards to paper.wakeUp(). No-op when the paper isn't resolved yet.

Returns

void

See

paper.wakeUp()

See

Paper quickstart

Example

import { GraphProvider, Paper, usePaper } from '@joint/react';

function FitButton() {
  const { paper } = usePaper();
  // `paper` is null until the <Paper> view has mounted.
  return <button onClick={() => paper?.transformToFitContent({ padding: 20 })}>Fit</button>;
}

function App() {
  return (
    <GraphProvider>
      <Paper />
      <FitButton />
    </GraphProvider>
  );
}