Switch from createClass

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["react"],
+  "presets": ["react", "stage-1"],
   "plugins": [
     ["transform-es2015-modules-commonjs", { "loose": true }],
     "transform-es2015-block-scoping",

.travis.yml

@@ -20,7 +20,7 @@ before_script:
 
 script:
   # --silent surpresses that big ol' NPM script error
-  - npm run-script lint  --silent
+  - npm run-script lint --silent
   - npm run-script test --silent
 
 cache:
@@ -32,6 +32,7 @@ cache:
 env:
   - CXX=g++-4.8
 addons:
+  firefox: latest
   apt:
     sources:
       - ubuntu-toolchain-r-test

README.md

@@ -1,25 +1,24 @@
-# react-spin
-
-[![Build Status](https://travis-ci.org/thomasboyt/react-spin.svg?branch=master)](https://travis-ci.org/thomasboyt/react-spin) [![npm](https://img.shields.io/npm/v/react-spin.svg)](https://www.npmjs.com/package/react-spin)
+# react-tiny-spin
 
 Tiny React wrapper around [spin.js](http://fgnass.github.io/spin.js/).
 
 ## Usage
 
 ```javascript
 import React from 'react';
-import Spinner from 'react-spin';
+import Spinner from 'react-tiny-spin';
+
+const spinCfg = {
+  width: 12,
+  radius: 35,
+  // ...
+};
 
-const MyComponent = React.createClass({
-  render: function() {
-    var spinCfg = {
-      width: 12,
-      radius: 35,
-      // ...
-    };
+class MyComponent extends React.Component {
+  render() {
     return <Spinner config={spinCfg} />
   }
-});
+}
 ```
 
 ## Properties

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "react-spin",
-  "version": "0.6.2",
+  "name": "react-tiny-spin",
+  "version": "0.6.3",
   "description": "A React component wrapper for spin.js",
   "main": "lib/main.js",
   "scripts": {
-    "test": "karma start --single-run --browsers Firefox",
+    "test": "karma start --single-run --browsers Chrome",
     "lint": "eslint src/",
     "build": "rimraf lib && babel src --out-dir lib --ignore *.spec.js",
     "prepublish": "npm run build"
@@ -13,7 +13,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/thomasboyt/react-spin"
+    "url": "https://github.com/captDaylight/react-tiny-spin"
   },
   "devDependencies": {
     "babel-cli": "^6.6.0",
@@ -25,19 +25,21 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.7.0",
     "babel-plugin-transform-es3-property-literals": "^6.5.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.24.1",
     "eslint": "^1.10.3",
     "eslint-plugin-react": "^4.1.0",
     "expect": "^1.14.0",
     "karma": "^0.13.21",
     "karma-chrome-launcher": "^0.2.2",
-    "karma-firefox-launcher": "^0.1.7",
+    "karma-firefox-launcher": "^1.0.1",
     "karma-mocha": "^0.2.2",
     "karma-mocha-reporter": "^1.2.3",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.4.5",
-    "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rimraf": "^2.5.2",
     "webpack": "^1.12.14"
   },

src/__tests__/main.spec.js

@@ -1,6 +1,6 @@
 import expect from 'expect';
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 
 import ReactSpinner from '../main';
 

src/main.js

@@ -1,36 +1,37 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import Spinner from 'spin.js';
 
-const ReactSpinner = React.createClass({
-  propTypes: {
-    config: React.PropTypes.object,
-    stopped: React.PropTypes.bool
-  },
+class ReactSpinner extends PureComponent {
+  static propTypes = {
+    config: PropTypes.object,
+    stopped: PropTypes.bool
+  };
 
-  componentDidMount: function() {
+  componentDidMount() {
     this.spinner = new Spinner(this.props.config);
     if (!this.props.stopped) {
-      this.spinner.spin(this.refs.container);
+      this.spinner.spin(this.container);
     }
-  },
+  }
 
-  componentWillReceiveProps: function(newProps) {
+  componentWillReceiveProps(newProps) {
     if (newProps.stopped === true && !this.props.stopped) {
       this.spinner.stop();
     } else if (!newProps.stopped && this.props.stopped === true) {
-      this.spinner.spin(this.refs.container);
+      this.spinner.spin(this.container);
     }
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.spinner.stop();
-  },
+  }
 
-  render: function() {
+  render() {
     return (
-      <span ref="container" />
+      <span ref={(container) => (this.container = container)} />
     );
   }
-});
+}
 
 export default ReactSpinner;