Moved to ES6 & added TypeScript declaration

.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["es2015", "react"],
-  "plugins": ["transform-es2015-modules-umd"]
+  "presets": ["react"]
 }

dist/react-progressbar.js

@@ -1,148 +1,150 @@
-(function (global, factory) {
-    if (typeof define === "function" && define.amd) {
-        define(['module', 'react', 'react-dom', 'lodash.isequal', 'progressbar.js'], factory);
-    } else if (typeof exports !== "undefined") {
-        factory(module, require('react'), require('react-dom'), require('lodash.isequal'), require('progressbar.js'));
-    } else {
-        var mod = {
-            exports: {}
+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 React = require('react');
+var ReactDom = require('react-dom');
+var isEqual = require('lodash.isequal');
+var ProgressBar = require('progressbar.js');
+
+class Shape extends React.Component {
+    static get defaultProps() {
+        return {
+            ShapeClass: null,
+            options: {},
+            progress: 0,
+            text: null,
+            initialAnimate: false,
+            containerStyle: {},
+            containerClassName: '.progressbar-container',
+            svgPath: null
         };
-        factory(mod, global.react, global.reactDom, global.lodash, global.progressbar);
-        global.main = mod.exports;
     }
-})(this, function (module, React, ReactDom, isEqual, ProgressBar) {
-    'use strict';
 
-    var _extends = Object.assign || function (target) {
-        for (var i = 1; i < arguments.length; i++) {
-            var source = arguments[i];
+    get _isPath() {
+        return this.props.ShapeClass instanceof ProgressBar.Path;
+    }
 
-            for (var key in source) {
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
+    constructor(props) {
+        super(props);
 
-        return target;
-    };
-
-    var Shape = React.createClass({
-        displayName: 'Shape',
-
-        getDefaultProps: function getDefaultProps() {
-            return {
-                ShapeClass: null,
-                options: {},
-                progress: 0,
-                text: null,
-                initialAnimate: false,
-                containerStyle: {},
-                containerClassName: '.progressbar-container'
-            };
-        },
-
-        getInitialState: function getInitialState() {
-            return {
-                shape: null
-            };
-        },
-
-        render: function render() {
-            var style = this.props.containerStyle;
-            var className = this.props.containerClassName;
-
-            return React.createElement('div', { className: className, style: style, ref: 'progressBar' });
-        },
-
-        componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-            if (!isEqual(this.props.options, nextProps.options)) {
-                this._destroy();
-                this._create(nextProps, this.props);
-                return;
-            }
+        this.state = {
+            shape: null
+        };
+    }
 
-            this._animateProgress(nextProps.progress);
-            this._setText(nextProps.text);
-        },
+    render() {
+        var style = this.props.containerStyle;
+        var className = this.props.containerClassName;
 
-        componentDidMount: function componentDidMount() {
-            this._create(this.props);
-        },
+        return React.createElement('div', { className: className, style: style, ref: 'progressBar' });
+    }
 
-        componentWillUnmount: function componentWillUnmount() {
+    componentWillReceiveProps(nextProps) {
+        if (!isEqual(this.props.options, nextProps.options)) {
             this._destroy();
-        },
+            this._create(nextProps, this.props);
+            return;
+        }
 
-        _create: function _create(props, oldProps) {
-            if (this.state.shape !== null) {
-                throw new Error('Progressbar is already created');
-            }
+        this.animateProgress(nextProps.progress);
+        this.setText(nextProps.text);
+    }
 
-            // setState function is not used to prevent a new render cycle
-            // This handling happens outside of React component's lifecycle
-            var container = ReactDom.findDOMNode(this.refs.progressBar);
-            this.state.shape = new props.ShapeClass(container, props.options);
+    componentDidMount() {
+        this._create(this.props);
+    }
 
-            if (props.initialAnimate) {
-                if (oldProps) {
-                    this._setProgress(oldProps.progress);
-                }
+    componentWillUnmount() {
+        this._destroy();
+    }
 
-                this._animateProgress(props.progress);
-            } else {
-                this._setProgress(props.progress);
-            }
+    _create(props, oldProps) {
+        if (this.state.shape !== null) {
+            throw new Error('Progressbar is already created');
+        }
 
-            this._setText(props.text);
-        },
+        // setState function is not used to prevent a new render cycle
+        // This handling happens outside of React component's lifecycle
+        var container = ReactDom.findDOMNode(this.refs.progressBar);
+        this.state.shape = new props.ShapeClass(this._isPath ? this.props.svgPath : container, props.options);
 
-        _destroy: function _destroy() {
-            if (this.state.shape) {
-                this.state.shape.destroy();
-                this.state.shape = null;
+        if (props.initialAnimate) {
+            if (oldProps) {
+                this.setProgress(oldProps.progress);
             }
-        },
 
-        _animateProgress: function _animateProgress(progress) {
-            this.state.shape.animate(progress);
-        },
+            this.animateProgress(props.progress);
+        } else {
+            this.setProgress(props.progress);
+        }
 
-        _setProgress: function _setProgress(progress) {
-            this.state.shape.set(progress);
-        },
+        this.setText(props.text);
+    }
 
-        _setText: function _setText(text) {
-            if (text) {
-                this.state.shape.setText(text);
-            }
+    _destroy() {
+        if (this.state.shape) {
+            this.state.shape.destroy();
+            this.state.shape = null;
         }
-    });
+    }
 
-    var Line = React.createClass({
-        displayName: 'Line',
-        render: function render() {
-            return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Line }));
-        }
-    });
+    animateProgress(progress) {
+        this.state.shape.animate(progress);
+    }
 
-    var Circle = React.createClass({
-        displayName: 'Circle',
-        render: function render() {
-            return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.Circle }));
-        }
-    });
+    setProgress(progress) {
+        this.state.shape.set(progress);
+    }
 
-    var SemiCircle = React.createClass({
-        displayName: 'SemiCircle',
-        render: function render() {
-            return React.createElement(Shape, _extends({}, this.props, { ShapeClass: ProgressBar.SemiCircle }));
+    setText(text) {
+        if (text) {
+            this.state.shape.setText(text);
         }
-    });
-
-    module.exports = {
-        Line: Line,
-        Circle: Circle,
-        SemiCircle: SemiCircle
-    };
-});
+    }
+}
+
+class Line extends React.Component {
+    get _shape() {
+        return this.refs.shape;
+    }
+
+    render() {
+        return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.Line }));
+    }
+}
+
+class Circle extends React.Component {
+    get _shape() {
+        return this.refs.shape;
+    }
+
+    render() {
+        return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.Circle }));
+    }
+}
+
+class SemiCircle extends React.Component {
+    get _shape() {
+        return this.refs.shape;
+    }
+
+    render() {
+        return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.SemiCircle }));
+    }
+}
+
+class Path extends React.Component {
+    get _shape() {
+        return this.refs.shape;
+    }
+
+    render() {
+        return React.createElement(Shape, _extends({}, this.props, { ref: 'shape', ShapeClass: ProgressBar.Path }));
+    }
+}
+
+module.exports = {
+    Shape: Shape,
+    Line: Line,
+    Circle: Circle,
+    SemiCircle: SemiCircle
+};

local-dev/main.js

@@ -3,39 +3,41 @@ var ReactDom = require('react-dom');
 var ProgressBar = require('../src/main.js');
 var Circle = ProgressBar.Circle;
 
-var App = React.createClass({
-    getInitialState: function() {
-        return {
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
             progress: 0.1,
             options: {}
         };
-    },
+    }
 
-    render: function() {
+    render() {
+        console.log("render");
         return <Circle initialAnimate={this.state.initialAnimate} options={this.state.options} progress={this.state.progress} />;
-    },
-
-    componentDidMount: function() {
-        var self = this;
-        setTimeout(function() {
-            console.log('setstate')
-            self.setState({
-                progress: 1
-            });
-        }, 1000);
+    }
 
-        setTimeout(function() {
-            console.log('setstate')
-            self.setState({
-                initialAnimate: true,
-                progress: 1
-            });
-        }, 500);
+    componentDidMount() {
+        // var self = this;
+        // setTimeout(function() {
+        //     console.log('setstate')
+        //     self.setState({
+        //         progress: 1
+        //     });
+        // }, 1000);
 
+        // setTimeout(function() {
+        //     console.log('setstate')
+        //     self.setState({
+        //         initialAnimate: true,
+        //         progress: 1
+        //     });
+        // }, 500);
     }
-});
+}
 
 ReactDom.render(
     <App />,
-    document.querySelector('body')
+    document.querySelector('#progress')
 );