React flowchart: Example demonstrating custom grouping nodes

Question

I'm studying the documentation for the React Flow library and trying to find out if there is a way to create my own node that will be a group (I want to implement a custom title and style before the child nodes). I didn't find anything in the documentation - neither in the Docs/Sub flow section, nor in the Api/Custom nodes section.

As a temporary solution to implement node headers, I created a dedicated node and placed it as the first child. But I don't really like this solution.

P.S. Found the same question in the discussion section of the library's gitlab repository, no answer yet - https://github.com/wbkd/react-flow/discussions/2592

P.P.S: The answer on githab said that if the parentNode parameter is specified for a child node, any node will become a parent node. Haven't checked yet.

Answer 1

Indeed: any node can become a group if you assign its id to its child node as parentNode