Lifecycle methods update

.babelrc

@@ -1,3 +1,3 @@
 {
     "presets": ["es2015", "react"]
-}
+}

.eslintrc

@@ -18,7 +18,5 @@
         "describe": true,
         "it": true
     },
-    "plugins": [
-        "react"
-    ]
-}
+    "plugins": ["react"]
+}

package.json

@@ -26,17 +26,16 @@
     "url": "https://github.com/zackargyle/react-analog-clock.git"
   },
   "peerDependencies": {
+    "prop-types": "^15.6.0",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "prop-types": "^15.6.0"
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.9.0",
     "babel-core": "^6.6.5",
     "babel-loader": "^6.2.2",
     "babel-polyfill": "^6.5.0",
     "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
     "chai": "^3.2.0",
     "cross-env": "^1.0.7",
     "enzyme": "^3.3.0",
@@ -79,5 +78,8 @@
     "es/",
     "lib/"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "babel-preset-react": "^6.24.1"
+  }
 }

src/AnalogClock.js

@@ -7,10 +7,8 @@ import { cssTransform, updateTime } from './util';
 import { dark } from './themes';
 
 export default class AnalogClock extends Component {
-
     constructor(props) {
-        super();
-
+        super(props);
         const date = this.initializeTime(props.gmtOffset);
         this.state = {
             seconds: date[2],
@@ -27,8 +25,10 @@ export default class AnalogClock extends Component {
         }, 1000);
     }
 
-    componentWillReceiveProps(nextProps) {
-        this.styles = cssTransform(Styles, nextProps);
+    componentDidUpdate(prevProps) {
+        if (prevProps !== this.props) {
+            this.styles = cssTransform(Styles, prevProps);
+        }
     }
 
     componentWillUnmount() {
@@ -38,15 +38,27 @@ export default class AnalogClock extends Component {
     initializeTime(gmtOffset) {
         const now = new Date();
         if (gmtOffset && gmtOffset !== 'undefined') {
-            const offsetNow = new Date(now.valueOf() + (parseFloat(gmtOffset) * 1000 * 60 * 60));
-            return [offsetNow.getUTCHours(), offsetNow.getUTCMinutes(), offsetNow.getUTCSeconds()];
+            const offsetNow = new Date(
+                now.valueOf() + parseFloat(gmtOffset) * 1000 * 60 * 60
+            );
+            return [
+                offsetNow.getUTCHours(),
+                offsetNow.getUTCMinutes(),
+                offsetNow.getUTCSeconds(),
+            ];
         } else {
             return [now.getHours(), now.getMinutes(), now.getSeconds()];
         }
     }
 
     render() {
-        return <AnalogClockLayout {...this.state} styles={this.styles} showSmallTicks={this.props.showSmallTicks} />;
+        return (
+            <AnalogClockLayout
+              {...this.state}
+              styles={this.styles}
+              showSmallTicks={this.props.showSmallTicks}
+            />
+        );
     }
 }
 

src/util.js

@@ -1,4 +1,4 @@
-export function cssTransform(styles, props) {
+export const cssTransform = (styles, props) => {
     return Object.keys(styles).reduce((newStyles, rootKey) => {
         const style = styles[rootKey];
         newStyles[rootKey] = Object.keys(style).reduce((newStyle, key) => {
@@ -11,9 +11,9 @@ export function cssTransform(styles, props) {
         }, {});
         return newStyles;
     }, {});
-}
+};
 
-export function updateTime({ seconds, minutes, hour }) {
+export const updateTime = ({ seconds, minutes, hour }) => {
     seconds += 1;
     if (seconds === 60) {
         seconds = 0;
@@ -27,4 +27,4 @@ export function updateTime({ seconds, minutes, hour }) {
         hour = 0;
     }
     return { seconds, minutes, hour };
-}
+};

webpack.config.js

@@ -1,36 +1,40 @@
-var webpack = require('webpack');
+const webpack = require('webpack');
 
-var env = process.env.NODE_ENV;
-var config = {
+const env = process.env.NODE_ENV;
+const config = {
     externals: {
         react: {
             root: 'React',
             commonjs2: 'react',
             commonjs: 'react',
-            amd: 'react'
+            amd: 'react',
         },
         'react-dom': {
             root: 'ReactDOM',
             commonjs2: 'react-dom',
             commonjs: 'react-dom',
-            amd: 'react-dom'
-        }
+            amd: 'react-dom',
+        },
     },
     module: {
         loaders: [
-            { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }
-        ]
+            {
+                test: /\.(js)$/,
+                loaders: 'babel-loader',
+                exclude: /node_modules/,
+            },
+        ],
     },
     output: {
         library: 'ReactSexyClock',
-        libraryTarget: 'umd'
+        libraryTarget: 'umd',
     },
     plugins: [
         new webpack.optimize.OccurrenceOrderPlugin(),
         new webpack.DefinePlugin({
-            'process.env.NODE_ENV': JSON.stringify(env)
-        })
-    ]
+            'process.env.NODE_ENV': JSON.stringify(env),
+        }),
+    ],
 };
 
 if (env === 'production') {
@@ -41,10 +45,10 @@ if (env === 'production') {
                 unsafe: true,
                 unsafe_comps: true,
                 screw_ie8: true,
-                warnings: false
-            }
+                warnings: false,
+            },
         })
-    )
+    );
 }
 
 module.exports = config;