diff --git a/.changeset/forty-dryers-cry.md b/.changeset/forty-dryers-cry.md new file mode 100644 index 00000000..618ce567 --- /dev/null +++ b/.changeset/forty-dryers-cry.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Fix node fallback to respect custom default node type when unknown node type is encountered diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 7bbe7890..031f38c6 100644 --- a/examples/react/src/App/routes.ts +++ b/examples/react/src/App/routes.ts @@ -9,6 +9,7 @@ import ControlledViewport from '../examples/ControlledViewport'; import CustomConnectionLine from '../examples/CustomConnectionLine'; import CustomMiniMapNode from '../examples/CustomMiniMapNode'; import CustomNode from '../examples/CustomNode'; +import DefaultNodeOverwrite from '../examples/DefaultNodeOverwrite'; import DefaultNodes from '../examples/DefaultNodes'; import DragHandle from '../examples/DragHandle'; import DragNDrop from '../examples/DragNDrop'; @@ -129,6 +130,11 @@ const routes: IRoute[] = [ path: 'custom-node', component: CustomNode, }, + { + name: 'Default Node Overwrite', + path: 'default-node-overwrite', + component: DefaultNodeOverwrite, + }, { name: 'Default Nodes', path: 'default-nodes', diff --git a/examples/react/src/examples/DefaultNodeOverwrite/index.tsx b/examples/react/src/examples/DefaultNodeOverwrite/index.tsx new file mode 100644 index 00000000..051f4ad4 --- /dev/null +++ b/examples/react/src/examples/DefaultNodeOverwrite/index.tsx @@ -0,0 +1,41 @@ +import { ReactFlow, Node, ReactFlowProvider, Background, BackgroundVariant, NodeProps } from '@xyflow/react'; + +const initialNodes: Node[] = [ + { + id: '1', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + }, + { + id: '2', + data: { label: 'Node 2' }, + type: 'unregistered', + position: { x: 100, y: 100 }, + className: 'light', + }, +]; + +const CustomNode = (_: NodeProps) => { + return
Custom node
; +}; + +const nodeTypes = { + default: CustomNode, +}; + +const DefaultNodes = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + + ); +} diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index dcab1536..bfac2087 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -58,7 +58,7 @@ export function NodeWrapper({ if (NodeComponent === undefined) { onError?.('003', errorMessages['error003'](nodeType)); nodeType = 'default'; - NodeComponent = builtinNodeTypes.default; + NodeComponent = nodeTypes?.['default'] || builtinNodeTypes.default; } const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));