React.forwardRef

React.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>;

Creates a React component that forwards the ref attribute it receives to another component below in the tree.

This technique is not very common but is particularly useful in two scenarios: forwarding refs to DOM components and forwarding refs in higher-order-components.

React.forwardRef — Structure map

Clickable & Draggable!

React.forwardRef — Related pages: