React Node Resolver

A generic technique for resolving the DOM node of any react component.

Alternative Solutions

Since creating this utility, more robust solutions have become available. Consider the following before using this package:

• React.forwardRef()
• The render props pattern

Install

yarn add react-node-resolver

Use

import NodeResolver from 'react-node-resolver';

class ObfuscatedComponent extends Component {
  render() {
    return <div id="inaccessible-node" />;
  }
}

class GroovyThing extends Component {
  getNode = (ref) => {
    console.log(ref); // <div id="inaccessible-node" />
  }
  render () {
    return (
      <NodeResolver innerRef={this.getNode}>
        <ObfuscatedComponent />
      </NodeResolver>
    );
  }
}

Props

Property	Type	Description
children	Element	A single react Component
innerRef	ElementRef	Callback ref ref => this.node = ref