add ClusterPortal component

example/example.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '../src';
+import { ClusterPortal } from '../src/components/ClusterPortal';
 
 const Example: FC = () => (
   <Digraph

src/components/ClusterPortal.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ICluster } from 'ts-graphviz';
+import { Cluster } from './contexts/Cluster';
+import { ClusterMap } from './contexts/ClusterMap';
+import { useRootCluster } from '../hooks/use-root-cluster';
+
+type Props = {
+  name?: string;
+};
+
+export const ClusterPortal: FC<Props> = ({ children, name }) => {
+  const root = useRootCluster();
+  const map = useContext(ClusterMap);
+  const cluster = useMemo(() => {
+    if (name && map.has(name)) {
+      return map.get(name) as ICluster;
+    }
+    return root;
+  }, [root, map, name]);
+  return <Cluster.Provider value={cluster}>{children}</Cluster.Provider>;
+};
+
+ClusterPortal.displayName = 'ClusterPortal';
+ClusterPortal.defaultProps = {
+  name: undefined,
+};
+
+ClusterPortal.propTypes = {
+  name: PropTypes.string,
+};

src/components/Digraph.tsx

@@ -1,11 +1,12 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { RootCluster, NoRootCluster } from './contexts/RootCluster';
 import { Cluster } from './contexts/Cluster';
 import { useDigraph, DigraphProps } from '../hooks/use-digraph';
 import { useRenderedID } from '../hooks/use-rendered-id';
 import { useRootCluster } from '../hooks/use-root-cluster';
 import { DuplicatedRootClusterErrorMessage } from '../utils/errors';
+import { useClusterMap } from '../hooks/use-cluster-map';
 
 type Props = Omit<DigraphProps, 'label'> & {
   label?: ReactElement | string;
@@ -19,6 +20,12 @@ export const Digraph: FC<Props> = ({ children, label, ...props }) => {
   const renderedLabel = useRenderedID(label);
   if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
   const digraph = useDigraph(props);
+  const clusters = useClusterMap();
+  useEffect(() => {
+    if (digraph.id !== undefined) {
+      clusters.set(digraph.id, digraph);
+    }
+  }, [clusters, digraph]);
   return (
     <RootCluster.Provider value={digraph}>
       <Cluster.Provider value={digraph}>{children}</Cluster.Provider>

src/components/Graph.tsx

@@ -1,11 +1,12 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { RootCluster, NoRootCluster } from './contexts/RootCluster';
 import { Cluster } from './contexts/Cluster';
 import { GraphProps, useGraph } from '../hooks/use-graph';
 import { useRenderedID } from '../hooks/use-rendered-id';
 import { useRootCluster } from '../hooks/use-root-cluster';
 import { DuplicatedRootClusterErrorMessage } from '../utils/errors';
+import { useClusterMap } from '../hooks/use-cluster-map';
 
 type Props = Omit<GraphProps, 'label'> & {
   label?: ReactElement | string;
@@ -19,6 +20,12 @@ export const Graph: FC<Props> = ({ children, label, ...props }) => {
   const renderedLabel = useRenderedID(label);
   if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
   const graph = useGraph(props);
+  const clusters = useClusterMap();
+  useEffect(() => {
+    if (graph.id !== undefined) {
+      clusters.set(graph.id, graph);
+    }
+  }, [clusters, graph]);
   return (
     <RootCluster.Provider value={graph}>
       <Cluster.Provider value={graph}>{children}</Cluster.Provider>

src/components/Subgraph.tsx

@@ -1,8 +1,9 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Cluster } from './contexts/Cluster';
 import { useSubgraph, SubgraphProps } from '../hooks/use-subgraph';
 import { useRenderedID } from '../hooks/use-rendered-id';
+import { useClusterMap } from '../hooks/use-cluster-map';
 
 type Props = Omit<SubgraphProps, 'label'> & {
   label?: ReactElement | string;
@@ -12,6 +13,12 @@ export const Subgraph: FC<Props> = ({ children, label, ...props }) => {
   const renderedLabel = useRenderedID(label);
   if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
   const subgraph = useSubgraph(props);
+  const clusters = useClusterMap();
+  useEffect(() => {
+    if (subgraph.id !== undefined) {
+      clusters.set(subgraph.id, subgraph);
+    }
+  }, [subgraph, clusters]);
   return <Cluster.Provider value={subgraph}>{children}</Cluster.Provider>;
 };
 

src/components/contexts/ClusterMap.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ICluster } from 'ts-graphviz';
+
+export const ClusterMap = React.createContext<Map<string, ICluster>>(new Map());
+ClusterMap.displayName = 'ClusterMap';

src/hooks/use-cluster-map.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { ICluster } from 'ts-graphviz';
+import { ClusterMap } from '../components/contexts/ClusterMap';
+
+export const useClusterMap = (): Map<string, ICluster> => {
+  return useContext(ClusterMap);
+};

src/index.ts

@@ -1,6 +1,7 @@
 export * from './renderer/render';
 export * from './hooks/use-rendered';
 export * from './hooks/use-cluster';
+export * from './hooks/use-cluster-map';
 export * from './hooks/use-graphviz-context';
 export * from './hooks/use-digraph';
 export * from './hooks/use-graph';
@@ -16,3 +17,4 @@ export * from './components/Digraph';
 export * from './components/Subgraph';
 export * from './components/Node';
 export * from './components/Edge';
+export * from './components/ClusterPortal';

src/renderer/render.ts

@@ -2,18 +2,26 @@ import { ReactElement, createElement } from 'react';
 import { toDot } from 'ts-graphviz';
 import { GraphvizContext, Context } from '../components/contexts/GraphvizContext';
 import { reconciler } from './reconciler';
+import { ClusterMap } from '../components/contexts/ClusterMap';
 
 const noop = (): void => undefined;
 
 export function render(element: ReactElement, context: Context): number {
   const container = reconciler.createContainer({}, false, false);
+  // Clusters
   return reconciler.updateContainer(
     createElement(
-      GraphvizContext.Provider,
+      ClusterMap.Provider,
       {
-        value: context,
+        value: new Map(),
       },
-      element,
+      createElement(
+        GraphvizContext.Provider,
+        {
+          value: context,
+        },
+        element,
+      ),
     ),
     container,
     null,