ref-wrapping.jsx

class ReferenceWrapper extends Component {
  static displayName = 'ReferenceWrapper'
  render() {
    return Children.only(this.props.children)
  }
}

const renderWrapper = WrappedComponent => {
  function SizeMeRenderer(props) {
    const toRender = renderPlaceholder ? (
      <Placeholder className={className} style={style} />
    ) : (
      <WrappedComponent {...renderProps} {...restProps} />
    )

    return <ReferenceWrapper ref={explicitRef}>{toRender}</ReferenceWrapper>
  }
}

// using forwardRef
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;