#FlowModel को रेंडर करना

import { FlowModelRenderer } from '@nocobase/flow-engine';

// बुनियादी उपयोग
<FlowModelRenderer model={myModel} />

import { FieldModelRenderer } from '@nocobase/flow-engine';

// नियंत्रित फील्ड रेंडरिंग
<FieldModelRenderer model={fieldModel} />

showFlowSettings={{
  showBackground: true,    // बैकग्राउंड दिखाएँ
  showBorder: true,        // बॉर्डर दिखाएँ
  showDragHandle: true,    // ड्रैग हैंडल दिखाएँ
  style: {},              // कस्टम टूलबार स्टाइल
  toolbarPosition: 'inside' // टूलबार की स्थिति: 'inside' | 'above' | 'below'
}}

import { FlowModelRenderer } from '@nocobase/flow-engine';

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>लोड हो रहा है...</div>}
    />
  );
}

// सेटिंग्स दिखाएँ लेकिन 'हटाएँ' बटन छिपाएँ
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// सेटिंग्स और शीर्षक दिखाएँ
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// कॉन्टेक्स्ट मेनू मोड का उपयोग करें
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'कस्टम एक्शन',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('कस्टम एक्शन');
      }
    }
  ]}
/>

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
  showErrorFallback={false}
/>

import { FieldModelRenderer } from '@nocobase/flow-engine';

function FormField({ model, onChange, ...props }) {
  return (
    <FieldModelRenderer
      model={model}
      onChange={onChange}
      {...props}
    />
  );
}

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>रेंडरिंग विफल रही, कृपया पुनः प्रयास करें</div>}
/>

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
/>