Update react, react-hot-loader and react-transition-group migration

example/src/app.js

@@ -1,15 +1,20 @@
 import 'babel-polyfill';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import App from 'components/App';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import 'react-notifications/src/notifications.scss';
 import 'assets/styles/app.scss';
 
 const run = () => {
-  ReactDOM.render(<App/>, document.getElementById('app'));
+  render(
+    <React.StrictMode>
+      <App/>
+    </React.StrictMode>,
+    document.getElementById('app')
+  );
 };
 
 window.addEventListener('DOMContentLoaded', run);

example/webpack.config.babel.js

@@ -23,7 +23,7 @@ const sassLoader = {
   }
 };
 
-const hmr = HOT ? ['webpack-hot-middleware/client?reload=true'] : [];
+const hmr = HOT ? ['webpack-hot-middleware/client?reload=true', 'react-hot-loader/patch'] : [];
 
 const webpackConfig = {
   entry: {
@@ -61,7 +61,7 @@ const webpackConfig = {
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: ['react-hot-loader', 'babel-loader']
+        use: ['babel-loader']
       },
       {
         test: /\.css$/,

lib/NotificationContainer.js

@@ -46,7 +46,7 @@ var NotificationContainer = function (_React$Component) {
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = NotificationContainer.__proto__ || Object.getPrototypeOf(NotificationContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       notifications: []
-    }, _this.componentWillMount = function () {
+    }, _this.componentDidMount = function () {
       _NotificationManager2.default.addChangeListener(_this.handleStoreChange);
     }, _this.componentWillUnmount = function () {
       _NotificationManager2.default.removeChangeListener(_this.handleStoreChange);
@@ -65,11 +65,11 @@ var NotificationContainer = function (_React$Component) {
       var notifications = this.state.notifications;
       var _props = this.props,
           enterTimeout = _props.enterTimeout,
-          leaveTimeout = _props.leaveTimeout;
+          exitTimeout = _props.exitTimeout;
 
       return _react2.default.createElement(_Notifications2.default, {
         enterTimeout: enterTimeout,
-        leaveTimeout: leaveTimeout,
+        exitTimeout: exitTimeout,
         notifications: notifications,
         onRequestHide: this.handleRequestHide
       });
@@ -81,11 +81,11 @@ var NotificationContainer = function (_React$Component) {
 
 NotificationContainer.propTypes = {
   enterTimeout: _propTypes2.default.number,
-  leaveTimeout: _propTypes2.default.number
+  exitTimeout: _propTypes2.default.number
 };
 NotificationContainer.defaultProps = {
   enterTimeout: 400,
-  leaveTimeout: 400
+  exitTimeout: 400
 };
 exports.default = NotificationContainer;
 module.exports = exports['default'];

lib/Notifications.js

@@ -65,7 +65,7 @@ var Notifications = function (_React$Component) {
       var _props = this.props,
           notifications = _props.notifications,
           enterTimeout = _props.enterTimeout,
-          leaveTimeout = _props.leaveTimeout;
+          exitTimeout = _props.exitTimeout;
 
       var className = (0, _classnames2.default)('notification-container', {
         'notification-container-empty': notifications.length === 0
@@ -74,23 +74,26 @@ var Notifications = function (_React$Component) {
         'div',
         { className: className },
         _react2.default.createElement(
-          _reactTransitionGroup.CSSTransitionGroup,
-          {
-            transitionName: 'notification',
-            transitionEnterTimeout: enterTimeout,
-            transitionLeaveTimeout: leaveTimeout
-          },
+          _reactTransitionGroup.TransitionGroup,
+          null,
           notifications.map(function (notification) {
             var key = notification.id || new Date().getTime();
-            return _react2.default.createElement(_Notification2.default, {
-              key: key,
-              type: notification.type,
-              title: notification.title,
-              message: notification.message,
-              timeOut: notification.timeOut,
-              onClick: notification.onClick,
-              onRequestHide: _this2.handleRequestHide(notification)
-            });
+            return _react2.default.createElement(
+              _reactTransitionGroup.CSSTransition,
+              {
+                key: key,
+                classNames: 'notification',
+                timeout: { enter: enterTimeout, exit: exitTimeout }
+              },
+              _react2.default.createElement(_Notification2.default, {
+                type: notification.type,
+                title: notification.title,
+                message: notification.message,
+                timeOut: notification.timeOut,
+                onClick: notification.onClick,
+                onRequestHide: _this2.handleRequestHide(notification)
+              })
+            );
           })
         )
       );
@@ -104,13 +107,13 @@ Notifications.propTypes = {
   notifications: _propTypes2.default.array.isRequired,
   onRequestHide: _propTypes2.default.func,
   enterTimeout: _propTypes2.default.number,
-  leaveTimeout: _propTypes2.default.number
+  exitTimeout: _propTypes2.default.number
 };
 Notifications.defaultProps = {
   notifications: [],
   onRequestHide: function onRequestHide() {},
   enterTimeout: 400,
-  leaveTimeout: 400
+  exitTimeout: 400
 };
 exports.default = Notifications;
 module.exports = exports['default'];

lib/notifications.css

@@ -57,12 +57,12 @@
   transition: all 0.4s;
 }
 
-.notification-leave {
+.notification-exit {
   visibility: visible;
   transform: translate3d(0, 0, 0);
 }
 
-.notification-leave.notification-leave-active {
+.notification-exit.notification-exit-active {
   visibility: hidden;
   transform: translate3d(100%, 0, 0);
   transition: all 0.4s;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notifications",
-  "version": "1.4.3",
+  "version": "2.0.0",
   "description": "Notification component for ReactJS",
   "main": "lib/index.js",
   "scripts": {
@@ -18,7 +18,7 @@
   "dependencies": {
     "classnames": "^2.1.1",
     "prop-types": "^15.5.10",
-    "react-transition-group": "^1.2.0"
+    "react-transition-group": "^2.5.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.0.1",
@@ -58,9 +58,9 @@
     "http-proxy": "^1.16.2",
     "node-sass": "^4.5.0",
     "postcss-loader": "^2.0.5",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-hot-loader": "^1.3.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-hot-loader": "^4.6.3",
     "react-router-dom": "^4.1.1",
     "run-sequence": "^1.2.2",
     "sass-loader": "^6.0.1",

src/NotificationContainer.js

@@ -6,19 +6,19 @@ import Notifications from './Notifications';
 class NotificationContainer extends React.Component {
   static propTypes = {
     enterTimeout: PropTypes.number,
-    leaveTimeout: PropTypes.number
+    exitTimeout: PropTypes.number
   };
 
   static defaultProps = {
     enterTimeout: 400,
-    leaveTimeout: 400
+    exitTimeout: 400
   };
 
   state = {
     notifications: []
   };
 
-  componentWillMount = () => {
+  componentDidMount = () => {
     NotificationManager.addChangeListener(this.handleStoreChange);
   };
 
@@ -38,11 +38,11 @@ class NotificationContainer extends React.Component {
 
   render() {
     const { notifications } = this.state;
-    const { enterTimeout, leaveTimeout } = this.props;
+    const { enterTimeout, exitTimeout } = this.props;
     return (
       <Notifications
         enterTimeout={enterTimeout}
-        leaveTimeout={leaveTimeout}
+        exitTimeout={exitTimeout}
         notifications={notifications}
         onRequestHide={this.handleRequestHide}
       />

src/Notifications.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CSSTransitionGroup } from 'react-transition-group';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
 import Notification from './Notification';
 
@@ -9,15 +9,15 @@ class Notifications extends React.Component {
     notifications: PropTypes.array.isRequired,
     onRequestHide: PropTypes.func,
     enterTimeout: PropTypes.number,
-    leaveTimeout: PropTypes.number
+    exitTimeout: PropTypes.number
   };
 
   static defaultProps = {
     notifications: [],
     onRequestHide: () => {
     },
     enterTimeout: 400,
-    leaveTimeout: 400
+    exitTimeout: 400
   };
 
   handleRequestHide = notification => () => {
@@ -28,32 +28,33 @@ class Notifications extends React.Component {
   };
 
   render() {
-    const { notifications, enterTimeout, leaveTimeout } = this.props;
+    const { notifications, enterTimeout, exitTimeout } = this.props;
     const className = classnames('notification-container', {
       'notification-container-empty': notifications.length === 0
     });
     return (
       <div className={className}>
-        <CSSTransitionGroup
-          transitionName="notification"
-          transitionEnterTimeout={enterTimeout}
-          transitionLeaveTimeout={leaveTimeout}
-        >
+        <TransitionGroup>
           {notifications.map((notification) => {
             const key = notification.id || new Date().getTime();
             return (
-              <Notification
+              <CSSTransition
                 key={key}
-                type={notification.type}
-                title={notification.title}
-                message={notification.message}
-                timeOut={notification.timeOut}
-                onClick={notification.onClick}
-                onRequestHide={this.handleRequestHide(notification)}
-              />
+                classNames="notification"
+                timeout={{ enter: enterTimeout, exit: exitTimeout }}
+              >
+                <Notification
+                  type={notification.type}
+                  title={notification.title}
+                  message={notification.message}
+                  timeOut={notification.timeOut}
+                  onClick={notification.onClick}
+                  onRequestHide={this.handleRequestHide(notification)}
+                />
+              </CSSTransition>
             );
           })}
-        </CSSTransitionGroup>
+        </TransitionGroup>
       </div>
     );
   }

src/notifications.scss

@@ -59,12 +59,12 @@
   transition: all $react-notifications-transition-time;
 }
 
-.notification-leave {
+.notification-exit {
   visibility: visible;
   transform: translate3d(0, 0, 0);
 }
 
-.notification-leave.notification-leave-active {
+.notification-exit.notification-exit-active {
   visibility: hidden;
   transform: translate3d(100%, 0, 0);
   transition: all $react-notifications-transition-time;