Merge pull request #64 from nkbt/ES6-Classes

ES6 Classes

.babelrc

@@ -4,6 +4,14 @@
     "react"
   ],
   "plugins": [
-    "transform-object-rest-spread"
-  ]
+    "transform-object-rest-spread",
+    "transform-class-properties"
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        ["transform-react-remove-prop-types", {"removeImport": true}]
+      ]
+    }
+  }
 }

.eslintrc

@@ -1,3 +1,14 @@
 {
-  "extends": "./node_modules/react-component-template/.eslintrc"
+  "extends": "./node_modules/react-component-template/.eslintrc",
+  "plugins": [
+    "babel"
+  ],
+  "rules": {
+    "babel/new-cap": 2,
+    "babel/object-curly-spacing": 2,
+    "babel/no-invalid-this": 2,
+    "babel/semi": 2,
+    "no-invalid-this": 0,
+    "react/jsx-sort-props": 0
+  }
 }

package.json

@@ -32,14 +32,14 @@
   },
   "homepage": "https://github.com/nkbt/react-copy-to-clipboard",
   "peerDependencies": {
-    "react": "^0.14 || ^15"
+    "react": "^15.3.0"
   },
   "dependencies": {
     "copy-to-clipboard": "^3",
-    "create-react-class": "^15.5.2",
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "react-component-template": "0.1.9"
+    "eslint-plugin-babel": "4.1.1",
+    "react-component-template": "0.1.10"
   }
 }

src/Component.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
 
 
-export const CopyToClipboard = createReactClass({
-  propTypes: {
+export class CopyToClipboard extends React.PureComponent {
+  static propTypes = {
     text: PropTypes.string.isRequired,
     children: PropTypes.element.isRequired,
     onCopy: PropTypes.func,
     options: PropTypes.shape({
       debug: PropTypes.bool,
       message: PropTypes.string
     })
-  },
+  };
 
-
-  onClick(event) {
+  onClick = event => {
     const {
       text,
       onCopy,
@@ -36,8 +34,7 @@ export const CopyToClipboard = createReactClass({
     if (elem && elem.props && typeof elem.props.onClick === 'function') {
       elem.props.onClick(event);
     }
-  },
-
+  };
 
   render() {
     const {
@@ -51,4 +48,4 @@ export const CopyToClipboard = createReactClass({
 
     return React.cloneElement(elem, {...props, onClick: this.onClick});
   }
-});
+}

src/example/App/index.js

@@ -1,30 +1,23 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import CopyToClipboard from '../..';
 import {name} from '../../../package.json';
 import css from './App.css';
 
 
-const App = createReactClass({
-  getInitialState() {
-    return {value: '', copied: false};
-  },
+class App extends React.PureComponent {
+  state = {value: '', copied: false};
 
-
-  onChange({target: {value}}) {
+  onChange = ({target: {value}}) => {
     this.setState({value, copied: false});
-  },
-
-
-  onCopy() {
-    this.setState({copied: true});
-  },
-
+  };
 
-  onClick({target: {innerHTML}}) {
+  onClick = ({target: {innerHTML}}) => {
     console.log(`Clicked on "${innerHTML}"!`); // eslint-disable-line
-  },
+  };
 
+  onCopy = () => {
+    this.setState({copied: true});
+  };
 
   render() {
     return (
@@ -55,7 +48,7 @@ const App = createReactClass({
       </div>
     );
   }
-});
+}
 
 
 export default App;