useOnElementsMeasured()

On the current paper

function useOnElementsMeasured(callback): void;

Calls a callback when element sizes are measured or re-measured.

Fires on the first measurement pass (at least one element has been sized) and again whenever an element is resized.

The callback receives ElementsMeasuredParams; check isInitial to distinguish the first measurement from later ones.

Parameters

Parameter	Type	Description
callback	OnElementsMeasured	Called each time element sizes are measured.

Returns

void

Example

import { useOnElementsMeasured } from '@joint/react';

// Mount inside a <Paper>: fit the surrounding paper once everything is sized.
function FitOnMeasure() {
  useOnElementsMeasured(({ paper, isInitial }) => {
    if (isInitial) {
      paper.transformToFitContent({ padding: 20 });
    }
  });
  return null;
}

On a specific paper

function useOnElementsMeasured(paperTarget, callback): void;

Calls a callback when element sizes are measured, targeting a specific paper instead of the surrounding context. Useful when several papers share one graph.

Parameters

Parameter	Type	Description
paperTarget	PaperTarget	Which paper to watch: a registered paper id, a dia.Paper instance, or a React ref to one.
callback	OnElementsMeasured	Called each time element sizes are measured.

Returns

void

Example

import { useOnElementsMeasured } from '@joint/react';
import { useRef } from 'react';
import type { dia } from '@joint/core';

function FitSpecificPaper() {
  const paperRef = useRef<dia.Paper>(null);
  useOnElementsMeasured(paperRef, ({ paper }) => {
    paper.transformToFitContent({ padding: 20 });
  });
  return null;
}