Accessing React refs in React-DnD

My team and I at OptinMonster are in the process of building a true drag & drop solution for the campaign builder. This represents the biggest improvement to the platform in over a year.

We landed on using the excellent React DnD to power the user interactions. It provides some high-level components to make use of the HTML5 Drag & Drop API which significantly speeds up our development.

One problem I’ve run into is accessing a child of the drop target element to calculate some hover interactions. The React DnD docs suggest using findDOMNode(component) but performing the DOM tree searches during the hover callback (which fires seemingly every 10ms) can bring the browser to a standstill with any significant number of nodes.

So instead I found React refs are accessible from within the React DnD callbacks with component.decoratedComponentInstance. This is a significantly faster method of pulling data out of the DOM and provides access only to the DOM elements you really need. Here’s how to make use of the refs:

JSX

Have any questions about React, drag & drop, or OptinMonster? Let me know on Twitter!

Leave a comment

Your email address will not be published. Required fields are marked *