Merge pull request #1 from runtastic/react-hooks

Rewrite component using hooks

Author: gvassallo

.eslintignore

@@ -1,2 +1,3 @@
 demo
 umd
+lib

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "parser": "babel-eslint",
   "extends": "airbnb",
+  "plugins": ["react-hooks"],
   "rules": {
     "max-len": [ 2, 140 ],
     "eqeqeq": [ 2, "always", { "null": "never" }],
@@ -26,6 +27,8 @@
     "react/prop-types": 0,
     "react/jsx-no-bind": 0,
     "react/no-array-index-key": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "comma-dangle": "off",
     "function-paren-newline": 0,
     "class-methods-use-this": 0

.gitignore

@@ -27,6 +27,8 @@ build/Release
 # Dependency directory
 node_modules
 
+package-lock.json
+
 # Optional npm cache directory
 .npm
 

demo/demo.js

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import HexagonGrid from '../src/HexagonGrid';
 import times from 'lodash/times';
 
-class HexGridDemo extends Component {
-  getHexProps(hexagon) {
+const HexGridDemo = () =>  {
+  const getHexProps = (hexagon) => {
     return {
       style: {
         fill: '#007aff',
@@ -14,7 +14,7 @@ class HexGridDemo extends Component {
     };
   }
 
-  renderHexagonContent(hexagon) {
+  const renderHexagonContent = (hexagon) => {
     return (
       <text
         x="50%"
@@ -29,19 +29,17 @@ class HexGridDemo extends Component {
     );
   }
 
-  render () {
-    let hexagons = times(102, id => id);
+  let hexagons = times(102, id => id);
 
-    return (
-      <HexagonGrid
-        gridWidth={500}
-        gridHeight={500}
-        hexagons={hexagons}
-        hexProps={this.getHexProps}
-        renderHexagonContent={this.renderHexagonContent}
-      />
-    );
-  }
+  return (
+    <HexagonGrid
+    gridWidth={500}
+    gridHeight={500}
+    hexagons={hexagons}
+    hexProps={getHexProps}
+    renderHexagonContent={renderHexagonContent}
+    />
+  );
 }
 
 ReactDOM.render(

demo/index.html

@@ -10,8 +10,8 @@
       <h1>react-hexagon-grid</h1>
       <div id="root"></div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"></script>
     <script src="bundle.js"></script>
   </body>
 </html>