Resizing a diagram using bpmnViewer

Developers
1

I am using bpmnViewer with the container width set to 100% and the height set to 700px. Is it possible to automatically resize the viewer so that the BPMN diagram can take whatever dimensions it needs to display properly, instead of being constrained by a fixed height?

For example, in React I’m using a component like this:

import React, { useEffect, useRef } from 'react';
import BpmnViewer from 'bpmn-js';

const BpmnDiagram = ({ xml }) => {
  const containerRef = useRef(null);
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!viewerRef.current) {
      viewerRef.current = new BpmnViewer({
        container: containerRef.current,
        width: '100%',
        height: '700px'
      });
    }

    if (xml) {
      viewerRef.current.importXML(xml).catch(err => {
        console.error('Failed to load diagram', err);
      });
    }
  }, [xml]);

  return <div ref={containerRef} style={{ width: '100%', height: '700px' }} />;
};

export default BpmnDiagram;