Tanstack form + React flow

[marc-at-brightnight]

I have a use case where we are trying to use React flow as the basis of some of our app forms. I am exploring if Tanstack can power our forms, since I like the API. I would essentially need a parent form, where each node is rendering a part of the parent form. However, not being able to pass appForm as a prop and having to use withForm is rather limiting. I'm sure there is good reason for that but I'm wondering if there's anything that can be done.

Some code to make this more concrete (abbreviated, not a complete example):

// FlowCanvas.tsx

const nodeTypes = {
  weather: WeatherNode,
};

const getInitialData = () => {
  return {
    nodes: [
      {
        id: 'weather',
        type: 'weather',
        position: { x: 30, y: 150 },
        data: {},
        draggable: false,
      },
    ] satisfies Array<TypedNodes>,
    edges: [] as Array<Edge>,
  };
};

const FlowCanvas = formHook.withForm({
  defaultValues,
  render: ({ form }) => {
    const flowRef = useRef<HTMLDivElement>(null);
    const { nodes: initNodes, edges: initEdges } = getInitialData(formik);
    const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);

    return (
            <ReactFlow
              ref={flowRef}
              proOptions={{ hideAttribution: true }}
              nodes={nodes}
              edges={edges}
              onNodesChange={onNodesChange}
              onEdgesChange={onEdgesChange}
              nodeTypes={nodeTypes}
            >
              <Background />
              <Controls showInteractive={true} />
            </ReactFlow>
    );
  },
});

// WeatherNode.tsx

interface Props extends NodeBase {}

const props: Props = {
  id: 'weather',
  position: {
    x: 0,
    y: 0
  },
  data: {}
};

const WeatherNode = formHook.withForm({
  defaultValues,
  props,
  render: ({ form, ...props }) => (
    // render node...
  )
});

The issue is of course that the type of WeatherNode is not what the ReactFlow component is expecting. Furthermore, WeatherNode needs to be given a form prop on render. Using another form library, I would pass the form object into data in getInitialData and then the subcomponent would be able to use that form object.

I understand you can't make your library work with all other libraries out there. Just curious if I'm missing something, since I'm still relatively new to Tanstack forms, or if Tanstack really can't support this use case.

[marc-at-brightnight]

whoops, wrong repo 🙈