Merge pull request #809 from piotrwitek/patch-1

Update README.md: Add Support React ES2015 / TypeScript syntax example

README.md

@@ -443,6 +443,64 @@ React.render(<div>
 </div>, document.body);
 ```
 
+### Support React ES2015 / TypeScript syntax
+As mixins are not supported in ES2015 / TypeScript syntax here is example of ES2015 ref based implementation.
+Using refs is the preferred (by facebook) "escape hatch" to underlaying DOM nodes: [React: The ref Callback Attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute)
+
+```js
+import * as React from "react";
+import Sortable from 'sortablejs';
+
+export class SortableExampleEsnext extends React.Component {
+
+  sortableContainersDecorator = (componentBackingInstance) => {
+    // check if backing instance not null
+    if (componentBackingInstance) {
+      let options = {
+        handle: ".group-title" // Restricts sort start click/touch to the specified element
+      };
+      Sortable.create(componentBackingInstance, options);
+    }
+  };
+
+  sortableGroupDecorator = (componentBackingInstance) => {
+    // check if backing instance not null
+    if (componentBackingInstance) {
+      let options = {
+        draggable: "div" // Specifies which items inside the element should be sortable
+        group: "shared"
+      };
+      Sortable.create(componentBackingInstance, options);
+    }
+  };
+
+  render() {
+    return (
+      <div className="container" ref={this.sortableContainersDecorator}>
+        <div className="group">
+          <h2 className="group-title">Group 1</h2>
+          <div className="group-list" ref={this.sortableGroupDecorator}>
+            <div>Swap them around</div>
+            <div>Swap us around</div>
+            <div>Swap things around</div>
+            <div>Swap everything around</div>
+          </div>
+        </div>
+        <div className="group">
+          <h2 className="group-title">Group 2</h2>
+          <div className="group-list" ref={this.sortableGroupDecorator}>
+            <div>Swap them around</div>
+            <div>Swap us around</div>
+            <div>Swap things around</div>
+            <div>Swap everything around</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+```
+
 
 ---