From 610527f029fb40571c08ed472c5bdcdab655c571 Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Mon, 21 Mar 2016 22:57:03 +0100
Subject: [PATCH] Update README.md

Add 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)
---
 README.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/README.md b/README.md
index 8ad1b79..4443936 100644
--- a/README.md
+++ b/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>
+    );
+  }
+}
+```
+
 
 ---