docs/docs/en/flow-engine/flow-model-renderer.md
FlowModelRenderer is the core React component for rendering a FlowModel. It is responsible for converting a FlowModel instance into a visual React component.
import { FlowModelRenderer } from '@nocobase/flow-engine';
// Basic usage
<FlowModelRenderer model={myModel} />
For controlled field Models, use FieldModelRenderer to render:
import { FieldModelRenderer } from '@nocobase/flow-engine';
// Controlled field rendering
<FieldModelRenderer model={fieldModel} />
| Parameter | Type | Default | Description |
|---|---|---|---|
model | FlowModel | - | The FlowModel instance to render |
uid | string | - | The unique identifier for the flow model |
fallback | React.ReactNode | <Skeleton.Button size="small" /> | Fallback content to display on rendering failure |
showFlowSettings | boolean | object | false | Whether to show the entry for flow settings |
flowSettingsVariant | 'dropdown' | 'contextMenu' | 'modal' | 'drawer' | 'dropdown' | The interaction style for flow settings |
hideRemoveInSettings | boolean | false | Whether to hide the remove button in the settings |
showTitle | boolean | false | Whether to display the model title in the top-left corner of the border |
skipApplyAutoFlows | boolean | false | Whether to skip applying auto flows |
inputArgs | Record<string, any> | - | Extra context passed to useApplyAutoFlows |
showErrorFallback | boolean | true | Whether to wrap the outermost layer with the FlowErrorFallback component |
settingsMenuLevel | number | - | Settings menu level: 1=current model only, 2=include child models |
extraToolbarItems | ToolbarItemConfig[] | - | Additional toolbar items |
showFlowSettings Detailed ConfigurationWhen showFlowSettings is an object, the following configurations are supported:
showFlowSettings={{
showBackground: true, // Show background
showBorder: true, // Show border
showDragHandle: true, // Show drag handle
style: {}, // Custom toolbar style
toolbarPosition: 'inside' // Toolbar position: 'inside' | 'above' | 'below'
}}
The entire rendering cycle calls the following methods in order:
beforeRender eventimport { FlowModelRenderer } from '@nocobase/flow-engine';
function MyComponent() {
const model = useFlowModel();
return (
<FlowModelRenderer
model={model}
fallback={<div>Loading...</div>}
/>
);
}
// Show settings but hide the remove button
<FlowModelRenderer
model={myModel}
showFlowSettings={true}
hideRemoveInSettings={true}
/>
// Show settings and title
<FlowModelRenderer
model={myModel}
showFlowSettings={true}
showTitle={true}
/>
// Use context menu mode
<FlowModelRenderer
model={myModel}
showFlowSettings={true}
flowSettingsVariant="contextMenu"
hideRemoveInSettings={true}
/>
<FlowModelRenderer
model={myModel}
showFlowSettings={true}
extraToolbarItems={[
{
key: 'custom-action',
title: 'Custom Action',
icon: 'SettingOutlined',
onClick: () => {
console.log('Custom action');
}
}
]}
/>
<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 has a comprehensive built-in error handling mechanism:
showErrorFallback={true} is enabled by default<FlowModelRenderer
model={myModel}
showErrorFallback={true}
fallback={<div>Rendering failed, please try again</div>}
/>
For scenarios where auto flows are not needed, you can skip them to improve performance:
<FlowModelRenderer
model={myModel}
skipApplyAutoFlows={true}
/>
FlowModelRenderer uses the observer from @formily/reactive-react for reactive updates, ensuring that the component automatically re-renders when the model's state changes.
model has a valid render method.skipApplyAutoFlows option.