Pass sortable isntance to component as a prop

Author: kjanoudi

src/index.jsx

@@ -41,15 +41,19 @@ const extend = (target, ...sources) => {
 };
 
 const SortableMixin = (options = defaultOptions) => (Component) => class extends React.Component {
-    sortableInstance = null;
+    
+    state = {
+        sortableInstance: null
+    };
+
     sortableOptions = extend({}, defaultOptions, options);
 
     componentDidMount() {
         const sortableComponent = this.refs[refName];
         const emitEvent = (type, evt) => {
             const methodName = this.sortableOptions[type];
             const method = sortableComponent[methodName];
-            method && method.call(sortableComponent, evt, this.sortableInstance);
+            method && method.call(sortableComponent, evt, this.state.sortableInstance);
         };
 
         let copyOptions = extend({}, this.sortableOptions);
@@ -107,7 +111,8 @@ const SortableMixin = (options = defaultOptions) => (Component) => class extends
         });
 
         const domNode = ReactDOM.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
-        this.sortableInstance = Sortable.create(domNode, copyOptions);
+        const sortableInstance = Sortable.create(domNode, copyOptions);
+        this.setState({sortableInstance});
     }
     componentWillReceiveProps(nextProps) {
         const sortableComponent = this.refs[refName];
@@ -121,15 +126,15 @@ const SortableMixin = (options = defaultOptions) => (Component) => class extends
         }
     }
     componentWillUnmount() {
-        if (this.sortableInstance) {
-            this.sortableInstance.destroy();
-            this.sortableInstance = null;
+        if (this.state.sortableInstance) {
+            this.state.sortableInstance.destroy();
+            this.setState({sortableInstance: null});
         }
     }
 
     render() {
         return (
-            <Component ref={refName} {...this.props} />
+            <Component ref={refName} sortableInstance={this.state.sortableInstance} {...this.props} />
         );
     }
 };