Components: Forwarding Refs

Forwarding Refs

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

Is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words, “forward” it) to a child.

Related concepts

Components: Forwarding Refs — Structure map

Clickable & Draggable!

Components: Forwarding Refs — Related pages: