Alternative React implementation example using refs (ES2015 syntax)

[piotrwitek]

• missing ReactDOM import
• Alternative React implementation example using refs (ES2015 syntax)

Using ReactDOM.findDOMNode is discouraged by facebook

you can use ReactDOM.findDOMNode as an "escape hatch" but we don't recommend it since it breaks encapsulation

I'm providing an alternative React implementation using ES2015 / TypeScript syntax "using refs", actually it's the preferred (by facebook) "escape hatch" to underlaying DOM nodes: React: The ref Callback Attribute

import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';
export class App extends React.Component {
  render () {
    return <div className='container' ref={this.dragulaDecorator}>
      <div>Swap me around</div>
      <div>Swap her around</div>
      <div>Swap him around</div>
      <div>Swap them around</div>
      <div>Swap us around</div>
      <div>Swap things around</div>
      <div>Swap everything around</div>
    </div>;
  },
  dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
      let options = { };
      Dragula([componentBackingInstance], options);
    }
  };
});
ReactDOM.render(<App />, document.getElementById('examples'));