diff --git a/.babelrc b/.babelrc
index 554d2ac..e05fb29 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
{
- "presets": ["react"],
+ "presets": ["react", "stage-1"],
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }],
"transform-es2015-block-scoping",
diff --git a/.travis.yml b/.travis.yml
index e79f833..5a837d9 100644
--- a/.travis.yml
+++ b/.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
diff --git a/README.md b/README.md
index 83d9567..875811e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,4 @@
-# react-spin
-
-[](https://travis-ci.org/thomasboyt/react-spin) [](https://www.npmjs.com/package/react-spin)
+# react-tiny-spin
Tiny React wrapper around [spin.js](http://fgnass.github.io/spin.js/).
@@ -8,18 +6,19 @@ Tiny React wrapper around [spin.js](http://fgnass.github.io/spin.js/).
```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
}
-});
+}
```
## Properties
diff --git a/package.json b/package.json
index 974f909..fcd2b1f 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/__tests__/main.spec.js b/src/__tests__/main.spec.js
index b42efce..f11e873 100644
--- a/src/__tests__/main.spec.js
+++ b/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';
diff --git a/src/main.js b/src/main.js
index 5bca4ac..363cd09 100644
--- a/src/main.js
+++ b/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 (
-
+ (this.container = container)} />
);
}
-});
+}
export default ReactSpinner;