React DnD 1.0 alpha example

react-dnd-1.0-alpha-example.js

import React from 'react';
import { configureDragDrop, configureDragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd/modules/backends/HTML5';

// Note: @configureDragDropContext is called a “decorator”.
// This desugars roughly as class App { ... } App = configureDragDropContext(HTML5Backend)(App);
// You can enable decorators by putting { "stage": 1 } in your .babelrc.

@configureDragDropContext(HTML5Backend)
export default class App extends React.Component {
  render() {
    return (
      <MyDraggable />
    );
  }
}

const DragSource = {
  beginDrag() {
    return { hello: 'world' };
  }
};

@configureDragDrop(
  register => register.dragSource('stuff', DragSource),
  dragSource => ({
    isDragging: dragSource.isDragging(),
    connectDragSource: dragSource.connect()
  })
)
class MyDraggable {
  render() {
    return (
      <div ref={this.props.connectDragSource}>
        Yo, am I being dragged? {this.props.isDragging.toString()}
      </div>
    );
  }
}