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?..
OptionalpaperId: stringAn explicit paper id, or omitted for the context/default paper.
The PaperApi: the resolved paper (or null) plus wakeUp,
freeze, and unfreeze actions.
Result of usePaper, the paper instance and imperative actions.
Readonlyfreeze: () => voidSuspend view updates so edits don't repaint until PaperApi.unfreeze.
Forwards to paper.freeze(). No-op when the paper isn't resolved yet.
Readonlypaper: PaperView | nullResolved JointJS paper instance, or null until a <Paper> has mounted.
Readonlyunfreeze: () => voidResume view updates and flush everything queued while frozen. Forwards to
paper.unfreeze(). No-op when the paper isn't resolved yet.
ReadonlywakeUp: () => voidTrigger a render pass on the paper. Forwards to paper.wakeUp().
No-op when the paper isn't resolved yet.
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>
);
}
usePaper()