noeldelgado · hhhonzik · Aug 10, 2016 · Aug 10, 2016 · Aug 10, 2016 · Aug 10, 2016
diff --git a/dist/index.js b/dist/index.js
@@ -1,83 +1,145 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _geminiScrollbar = require('gemini-scrollbar');
+
+var _geminiScrollbar2 = _interopRequireDefault(_geminiScrollbar);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var GeminiScrollbar = require('gemini-scrollbar');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-module.exports = React.createClass({
-    displayName: 'GeminiScrollbar',
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var GeminiScrollbar = function (_Component) {
+  _inherits(GeminiScrollbar, _Component);
+
+  function GeminiScrollbar() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, GeminiScrollbar);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    propTypes: {
-        autoshow: React.PropTypes.bool,
-        forceGemini: React.PropTypes.bool
-    },
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(GeminiScrollbar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.scrollbar = null, _temp), _possibleConstructorReturn(_this, _ret);
+  }
 
-    getDefaultProps: function getDefaultProps() {
-        return {
-            autoshow: false,
-            forceGemini: false
-        };
-    },
+  _createClass(GeminiScrollbar, [{
+    key: 'getDefaultProps',
+    value: function getDefaultProps() {
+      return {
+        autoshow: false,
+        forceGemini: false
+      };
+    }
+  }, {
+    key: 'getChildContext',
+    value: function getChildContext() {
+      var _this2 = this;
 
+      return {
+        geminiScrollbar: {
+          get: function get() {
+            return _this2.scrollbar;
+          }
+        }
+      };
+    }
 
     /**
      * Holds the reference to the GeminiScrollbar instance.
      * @property scrollbar <public> [Object]
      */
-    scrollbar: null,
-
-    componentDidMount: function componentDidMount() {
-        this.scrollbar = new GeminiScrollbar({
-            element: ReactDOM.findDOMNode(this),
-            autoshow: this.props.autoshow,
-            forceGemini: this.props.forceGemini,
-            createElements: false
-        }).create();
-    },
-    componentDidUpdate: function componentDidUpdate() {
-        this.scrollbar.update();
-    },
-    componentWillUnmount: function componentWillUnmount() {
-        if (this.scrollbar) {
-            this.scrollbar.destroy();
-        }
-        this.scrollbar = null;
-    },
-    render: function render() {
-        var _props = this.props;
-        var className = _props.className;
-        var children = _props.children;
-        var autoshow = _props.autoshow;
-        var forceGemini = _props.forceGemini;
-        var other = _objectWithoutProperties(_props, ['className', 'children', 'autoshow', 'forceGemini']);
-        var classes = '';
-
-        if (className) {
-            classes += ' ' + className;
-        }
 
-        return React.createElement(
-            'div',
-            _extends({}, other, { className: classes }),
-            React.createElement(
-                'div',
-                { className: 'gm-scrollbar -vertical' },
-                React.createElement('div', { className: 'thumb' })
-            ),
-            React.createElement(
-                'div',
-                { className: 'gm-scrollbar -horizontal' },
-                React.createElement('div', { className: 'thumb' })
-            ),
-            React.createElement(
-                'div',
-                { className: 'gm-scroll-view', ref: 'scroll-view' },
-                children
-            )
-        );
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.scrollbar = new _geminiScrollbar2.default({
+        element: this.refs.container,
+        autoshow: this.props.autoshow,
+        forceGemini: this.props.forceGemini,
+        createElements: false
+      }).create();
     }
-});
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.scrollbar.update();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.scrollbar) {
+        this.scrollbar.destroy();
+      }
+      this.scrollbar = null;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var className = _props.className;
+      var children = _props.children;
+      var autoshow = _props.autoshow;
+      var forceGemini = _props.forceGemini;
+
+      var other = _objectWithoutProperties(_props, ['className', 'children', 'autoshow', 'forceGemini']);
+
+      var classes = '';
+
+      if (className) {
+        classes += ' ' + className;
+      }
+
+      return _react2.default.createElement(
+        'div',
+        _extends({ className: classes, ref: 'container' }, other),
+        _react2.default.createElement(
+          'div',
+          { className: 'gm-scrollbar -vertical' },
+          _react2.default.createElement('div', { className: 'thumb' })
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'gm-scrollbar -horizontal' },
+          _react2.default.createElement('div', { className: 'thumb' })
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'gm-scroll-view', ref: 'scroll-view' },
+          children
+        )
+      );
+    }
+  }]);
+
+  return GeminiScrollbar;
+}(_react.Component);
+
+GeminiScrollbar.propTypes = {
+  autoshow: _react2.default.PropTypes.bool,
+  forceGemini: _react2.default.PropTypes.bool
+};
+GeminiScrollbar.childContextTypes = {
+  geminiScrollbar: _react2.default.PropTypes.object
+};
+exports.default = GeminiScrollbar;
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,68 +1,86 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var GeminiScrollbar = require('gemini-scrollbar');
 
-module.exports = React.createClass({
-    displayName: 'GeminiScrollbar',
+import React, { Component } from 'react';
+import Gemini from 'gemini-scrollbar';
 
-    propTypes: {
-        autoshow: React.PropTypes.bool,
-        forceGemini: React.PropTypes.bool
-    },
+export default class GeminiScrollbar extends Component {
+  static propTypes = {
+    autoshow: React.PropTypes.bool,
+    forceGemini: React.PropTypes.bool
+  };
 
-    getDefaultProps() {
-        return {
-            autoshow: false,
-            forceGemini: false
-        }
-    },
+  static childContextTypes = {
+    geminiScrollbar: React.PropTypes.object
+  };
 
-    /**
-     * Holds the reference to the GeminiScrollbar instance.
-     * @property scrollbar <public> [Object]
-     */
-    scrollbar: null,
+  getDefaultProps() {
+    return {
+      autoshow: false,
+      forceGemini: false
+    };
+  }
 
-    componentDidMount() {
-        this.scrollbar = new GeminiScrollbar({
-            element: ReactDOM.findDOMNode(this),
-            autoshow: this.props.autoshow,
-            forceGemini: this.props.forceGemini,
-            createElements: false
-        }).create();
-    },
+  getChildContext() {
+    return {
+      geminiScrollbar: {
+        get: () => this.scrollbar
+      }
+    };
+  }
 
-    componentDidUpdate() {
-        this.scrollbar.update();
-    },
+  /**
+   * Holds the reference to the GeminiScrollbar instance.
+   * @property scrollbar <public> [Object]
+   */
+  scrollbar = null;
 
-    componentWillUnmount() {
-        if (this.scrollbar) {
-            this.scrollbar.destroy();
-        }
-        this.scrollbar = null;
-    },
+  componentDidMount() {
+    this.scrollbar = new Gemini({
+      element: this.refs.container,
+      autoshow: this.props.autoshow,
+      forceGemini: this.props.forceGemini,
+      createElements: false
+    }).create();
+  }
 
-    render() {
-        var {className, children, autoshow, forceGemini, ...other} = this.props,
-            classes = '';
+  componentDidUpdate() {
+    this.scrollbar.update();
+  }
 
-        if (className) {
-            classes += ' ' + className;
-        }
+  componentWillUnmount() {
+    if (this.scrollbar) {
+      this.scrollbar.destroy();
+    }
+    this.scrollbar = null;
+  }
+
+  render() {
+    const {
+      className,
+      children,
+      autoshow,
+      forceGemini,
+      ...other
+    } = this.props;
+
+    let classes = '';
 
-        return (
-            <div {...other} className={classes}>
-                <div className='gm-scrollbar -vertical'>
-                    <div className='thumb'></div>
-                </div>
-                <div className='gm-scrollbar -horizontal'>
-                    <div className='thumb'></div>
-                </div>
-                <div className='gm-scroll-view' ref='scroll-view'>
-                    {children}
-                </div>
-            </div>
-        );
+    if (className) {
+      classes += ` ${className}`;
     }
-});
+
+    return (
+      <div className={classes} ref="container" {...other} >
+        <div className="gm-scrollbar -vertical">
+          <div className="thumb"></div>
+        </div>
+        <div className="gm-scrollbar -horizontal">
+          <div className="thumb"></div>
+        </div>
+        <div className="gm-scroll-view" ref="scroll-view">
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+