onRefAssignment PoC

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-d3-tree",
-  "version": "3.2.0",
+  "name": "react-d3-tree_callback-ref-prop",
+  "version": "3.3.0",
   "description": "React component to create interactive D3 tree hierarchies",
   "author": "Ben Kremer",
   "license": "MIT",

src/Node/index.tsx

@@ -28,6 +28,7 @@ type NodeProps = {
   onNodeClick: NodeEventHandler;
   onNodeMouseOver: NodeEventHandler;
   onNodeMouseOut: NodeEventHandler;
+  callbackRefForNode: (context: TreeNodeDatum, element: SVGGElement) => void;
   subscriptions: object;
 };
 
@@ -158,11 +159,14 @@ export default class Node extends React.Component<NodeProps, NodeState> {
   }
 
   render() {
-    const { data, nodeClassName } = this.props;
+    const { data, nodeClassName, callbackRefForNode } = this.props;
     return (
       <g
         id={data.__rd3t.id}
         ref={n => {
+          if (callbackRefForNode) {
+            callbackRefForNode(data, n);
+          }
           this.nodeRef = n;
         }}
         style={this.state.initialStyle}

src/Tree/index.tsx

@@ -29,6 +29,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     onLinkClick: undefined,
     onLinkMouseOver: undefined,
     onLinkMouseOut: undefined,
+    callbackRefForNode: undefined,
     onUpdate: undefined,
     orientation: 'horizontal',
     translate: { x: 0, y: 0 },
@@ -151,7 +152,12 @@ class Tree extends React.Component<TreeProps, TreeState> {
         .scaleExtent(zoomable ? [scaleExtent.min, scaleExtent.max] : [zoom, zoom])
         // TODO: break this out into a separate zoom handler fn, rather than inlining it.
         .filter(() => {
-          if (hasInteractiveNodes) return event.target.classList.contains(this.svgInstanceRef) || event.target.classList.contains(this.gInstanceRef) || event.shiftKey;
+          if (hasInteractiveNodes)
+            return (
+              event.target.classList.contains(this.svgInstanceRef) ||
+              event.target.classList.contains(this.gInstanceRef) ||
+              event.shiftKey
+            );
           return true;
         })
         .on('zoom', () => {
@@ -519,6 +525,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
                   nodeSize={nodeSize}
                   orientation={orientation}
                   enableLegacyTransitions={enableLegacyTransitions}
+                  callbackRefForNode={this.props.callbackRefForNode}
                   transitionDuration={transitionDuration}
                   onNodeToggle={this.handleNodeToggle}
                   onNodeClick={this.handleOnNodeClickCb}

src/Tree/types.ts

@@ -285,4 +285,9 @@ export interface TreeProps {
    * {@link Tree.defaultProps.hasInteractiveNodes | Default value}
    */
   hasInteractiveNodes?: boolean;
+
+  /**
+   * A function that is called when the ref gets assigned for each node
+   */
+  callbackRefForNode?: (context: TreeNodeDatum, element: SVGGElement) => void;
 }