Variable MeasuredNodeConst

Example

Example with a simple div:

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

function RenderElement() {
  return (
    <MeasuredNode>
      <div style={{ width: 100, height: 50 }}>Content</div>
    </MeasuredNode>
  );
}
Copy

Example with a simple div without explicit size defined:

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

function RenderElement() {
  return (
    <MeasuredNode>
      <div style={{ padding: 10 }}>Content</div>
    </MeasuredNode>
  );
}
Copy

Example

Example with custom size handling:

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

function RenderElement() {
  const handleSizeChange = (element: dia.Cell, size: { width: number; height: number }) => {
    console.log('New size:', size);
    element.set('size', { width: size.width + 10, height: size.height + 10 });
  };

  return (
    <MeasuredNode setSize={handleSizeChange}>
      <div style={{ width: 100, height: 50 }}>Content</div>
    </MeasuredNode>
  );
}
Copy