@joint/react
    Preparing search index...

    Function useOnElementsMeasured

    useOnElementsMeasured()

    • 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

      Returns void

      On the current paper

      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;
      }

    • 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

      • 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

      On a specific paper

      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;
      }

    Settings

    Member Visibility