diff --git a/packages/react-dock/src/Dock.js b/packages/react-dock/src/Dock.js
index c628f7f9..92ecea0f 100644
--- a/packages/react-dock/src/Dock.js
+++ b/packages/react-dock/src/Dock.js
@@ -5,7 +5,7 @@ import autoprefix from './autoprefix';
 
 function autoprefixes(styles) {
   return Object.keys(styles).reduce(
-    (obj, key) => (obj[key] = autoprefix(styles[key]), obj),
+    (obj, key) => ((obj[key] = autoprefix(styles[key])), obj),
     {}
   );
 }
@@ -16,7 +16,7 @@ const styles = autoprefixes({
     width: 0,
     height: 0,
     top: 0,
-    left: 0
+    left: 0,
   },
 
   dim: {
@@ -27,19 +27,19 @@ const styles = autoprefixes({
     bottom: 0,
     zIndex: 0,
     background: 'rgba(0, 0, 0, 0.2)',
-    opacity: 1
+    opacity: 1,
   },
 
   dimAppear: {
-    opacity: 0
+    opacity: 0,
   },
 
   dimTransparent: {
-    pointerEvents: 'none'
+    pointerEvents: 'none',
   },
 
   dimHidden: {
-    opacity: 0
+    opacity: 0,
   },
 
   dock: {
@@ -50,33 +50,34 @@ const styles = autoprefixes({
     left: 0,
     top: 0,
     width: '100%',
-    height: '100%'
+    height: '100%',
   },
 
   dockHidden: {
-    opacity: 0
+    opacity: 0,
   },
 
   dockResizing: {
-    transition: 'none'
+    transition: 'none',
   },
 
   dockContent: {
     width: '100%',
     height: '100%',
-    overflow: 'auto'
+    overflow: 'auto',
   },
 
   resizer: {
     position: 'absolute',
     zIndex: 2,
-    opacity: 0
-  }
+    opacity: 0,
+  },
 });
 
 function getTransitions(duration) {
-  return ['left', 'top', 'width', 'height']
-  .map(p => `${p} ${duration/1000}s ease-out`);
+  return ['left', 'top', 'width', 'height'].map(
+    (p) => `${p} ${duration / 1000}s ease-out`
+  );
 }
 
 function getDockStyles(
@@ -84,41 +85,37 @@ function getDockStyles(
   { size, isResizing, fullWidth, fullHeight }
 ) {
   let posStyle;
-  const absSize = fluid ?
-    (size * 100) + '%' :
-    size + 'px';
+  const absSize = fluid ? size * 100 + '%' : size + 'px';
 
   function getRestSize(fullSize) {
-    return fluid ?
-      (100 - size * 100) + '%' :
-      (fullSize - size) + 'px';
+    return fluid ? 100 - size * 100 + '%' : fullSize - size + 'px';
   }
 
-  switch(position) {
-  case 'left':
-    posStyle = {
-      width: absSize,
-      left: isVisible ? 0 : '-' + absSize
-    };
-    break;
-  case 'right':
-    posStyle = {
-      left: isVisible ? getRestSize(fullWidth) : fullWidth,
-      width: absSize
-    };
-    break;
-  case 'top':
-    posStyle = {
-      top: isVisible ? 0 : '-' + absSize,
-      height: absSize
-    };
-    break;
-  case 'bottom':
-    posStyle = {
-      top: isVisible ? getRestSize(fullHeight) : fullHeight,
-      height: absSize
-    };
-    break;
+  switch (position) {
+    case 'left':
+      posStyle = {
+        width: absSize,
+        left: isVisible ? 0 : '-' + absSize,
+      };
+      break;
+    case 'right':
+      posStyle = {
+        left: isVisible ? getRestSize(fullWidth) : fullWidth,
+        width: absSize,
+      };
+      break;
+    case 'top':
+      posStyle = {
+        top: isVisible ? 0 : '-' + absSize,
+        height: absSize,
+      };
+      break;
+    case 'bottom':
+      posStyle = {
+        top: isVisible ? getRestSize(fullHeight) : fullHeight,
+        height: absSize,
+      };
+      break;
   }
 
   const transitions = getTransitions(duration);
@@ -128,8 +125,10 @@ function getDockStyles(
     autoprefix({
       transition: [
         ...transitions,
-        !isVisible && `opacity 0.01s linear ${duration/1000}s`
-      ].filter(t => t).join(',')
+        !isVisible && `opacity 0.01s linear ${duration / 1000}s`,
+      ]
+        .filter((t) => t)
+        .join(','),
     }),
     dockStyle,
     autoprefix(posStyle),
@@ -152,7 +151,7 @@ function getDimStyles(
     dimMode === 'transparent' && styles.dimTransparent,
     !isVisible && styles.dimHidden,
     isTransitionStarted && isVisible && styles.dimAppear,
-    isTransitionStarted && !isVisible && styles.dimDisappear
+    isTransitionStarted && !isVisible && styles.dimDisappear,
   ];
 }
 
@@ -160,55 +159,50 @@ function getResizerStyles(position) {
   let resizerStyle;
   const size = 10;
 
-  switch(position) {
-  case 'left':
-    resizerStyle = {
-      right: -size / 2,
-      width: size,
-      top: 0,
-      height: '100%',
-      cursor: 'col-resize'
-    };
-    break;
-  case 'right':
-    resizerStyle = {
-      left: -size / 2,
-      width: size,
-      top: 0,
-      height: '100%',
-      cursor: 'col-resize'
-    };
-    break;
-  case 'top':
-    resizerStyle = {
-      bottom: -size / 2,
-      height: size,
-      left: 0,
-      width: '100%',
-      cursor: 'row-resize'
-    };
-    break;
-  case 'bottom':
-    resizerStyle = {
-      top: -size / 2,
-      height: size,
-      left: 0,
-      width: '100%',
-      cursor: 'row-resize'
-    };
-    break;
+  switch (position) {
+    case 'left':
+      resizerStyle = {
+        right: -size / 2,
+        width: size,
+        top: 0,
+        height: '100%',
+        cursor: 'col-resize',
+      };
+      break;
+    case 'right':
+      resizerStyle = {
+        left: -size / 2,
+        width: size,
+        top: 0,
+        height: '100%',
+        cursor: 'col-resize',
+      };
+      break;
+    case 'top':
+      resizerStyle = {
+        bottom: -size / 2,
+        height: size,
+        left: 0,
+        width: '100%',
+        cursor: 'row-resize',
+      };
+      break;
+    case 'bottom':
+      resizerStyle = {
+        top: -size / 2,
+        height: size,
+        left: 0,
+        width: '100%',
+        cursor: 'row-resize',
+      };
+      break;
   }
 
-  return [
-    styles.resizer,
-    autoprefix(resizerStyle)
-  ];
+  return [styles.resizer, autoprefix(resizerStyle)];
 }
 
 function getFullSize(position, fullWidth, fullHeight) {
-  return position === 'left' || position === 'right' ?
-    fullWidth :
-    fullHeight;
+  return position === 'left' || position === 'right' ? fullWidth : fullHeight;
 }
 
 export default class Dock extends Component {
@@ -218,10 +212,10 @@ export default class Dock extends Component {
       isControlled: typeof props.size !== 'undefined',
       size: props.size || props.defaultSize,
       isDimHidden: !props.isVisible,
-      fullWidth: typeof(window) !== 'undefined' && window.innerWidth,
-      fullHeight: typeof(window) !== 'undefined' && window.innerHeight,
+      fullWidth: typeof window !== 'undefined' && window.innerWidth,
+      fullHeight: typeof window !== 'undefined' && window.innerHeight,
       isTransitionStarted: false,
-      isWindowResizing: false
+      isWindowResizing: false,
     };
   }
 
@@ -237,8 +231,8 @@ export default class Dock extends Component {
     onSizeChange: PropTypes.func,
     dimStyle: PropTypes.object,
     dockStyle: PropTypes.object,
-    duration: PropTypes.number
-  }
+    duration: PropTypes.number,
+  };
 
   static defaultProps = {
     position: 'left',
@@ -246,8 +240,8 @@ export default class Dock extends Component {
     fluid: true,
     defaultSize: 0.3,
     dimMode: 'opaque',
-    duration: 200
-  }
+    duration: 200,
+  };
 
   componentDidMount() {
     window.addEventListener('mouseup', this.handleMouseUp);
@@ -265,7 +259,7 @@ export default class Dock extends Component {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const isControlled = typeof nextProps.size !== 'undefined';
 
     this.setState({ isControlled });
@@ -278,7 +272,7 @@ export default class Dock extends Component {
 
     if (this.props.isVisible !== nextProps.isVisible) {
       this.setState({
-        isTransitionStarted: true
+        isTransitionStarted: true,
       });
     }
   }
@@ -287,9 +281,9 @@ export default class Dock extends Component {
     const { fullWidth, fullHeight } = this.state;
 
     this.setState({
-      size: props.fluid ?
-        this.state.size / getFullSize(props.position, fullWidth, fullHeight) :
-        getFullSize(props.position, fullWidth, fullHeight) * this.state.size
+      size: props.fluid
+        ? this.state.size / getFullSize(props.position, fullWidth, fullHeight)
+        : getFullSize(props.position, fullWidth, fullHeight) * this.state.size,
     });
   }
 
@@ -307,40 +301,44 @@ export default class Dock extends Component {
 
   transitionEnd = () => {
     this.setState({ isTransitionStarted: false });
-  }
+  };
 
   hideDim = () => {
     if (!this.props.isVisible) {
       this.setState({ isDimHidden: true });
     }
-  }
+  };
 
   render() {
     const { children, zIndex, dimMode, position, isVisible } = this.props;
     const { isResizing, size, isDimHidden } = this.state;
 
-    const dimStyles = Object.assign({}, ...getDimStyles(this.props, this.state));
-    const dockStyles = Object.assign({}, ...getDockStyles(this.props, this.state));
+    const dimStyles = Object.assign(
+      {},
+      ...getDimStyles(this.props, this.state)
+    );
+    const dockStyles = Object.assign(
+      {},
+      ...getDockStyles(this.props, this.state)
+    );
     const resizerStyles = Object.assign({}, ...getResizerStyles(position));
 
     return (
       <div style={Object.assign({}, styles.wrapper, { zIndex })}>
-        {dimMode !== 'none' && !isDimHidden &&
+        {dimMode !== 'none' && !isDimHidden && (
           <div style={dimStyles} onClick={this.handleDimClick} />
-        }
+        )}
         <div style={dockStyles}>
-          <div style={resizerStyles}
-               onMouseDown={this.handleMouseDown} />
+          <div style={resizerStyles} onMouseDown={this.handleMouseDown} />
           <div style={styles.dockContent}>
-            {typeof children === 'function' ?
-              children({
-                position,
-                isResizing,
-                size,
-                isVisible
-              }) :
-              children
-            }
+            {typeof children === 'function'
+              ? children({
+                  position,
+                  isResizing,
+                  size,
+                  isVisible,
+                })
+              : children}
           </div>
         </div>
       </div>
@@ -351,7 +349,7 @@ export default class Dock extends Component {
     if (this.props.dimMode === 'opaque') {
       this.props.onVisibleChange && this.props.onVisibleChange(false);
     }
-  }
+  };
 
   handleResize = () => {
     if (window.requestAnimationFrame) {
@@ -359,7 +357,7 @@ export default class Dock extends Component {
     } else {
       this.updateWindowSize(true);
     }
-  }
+  };
 
   updateWindowSize = (windowResize) => {
     const sizeState = {
@@ -371,37 +369,37 @@ export default class Dock extends Component {
       this.setState({
         ...sizeState,
         isResizing: true,
-        isWindowResizing: windowResize
+        isWindowResizing: windowResize,
       });
 
       this.debouncedUpdateWindowSizeEnd();
     } else {
       this.setState(sizeState);
     }
-  }
+  };
 
   updateWindowSizeEnd = () => {
     this.setState({
       isResizing: false,
-      isWindowResizing: false
+      isWindowResizing: false,
     });
-  }
+  };
 
-  debouncedUpdateWindowSizeEnd = debounce(this.updateWindowSizeEnd, 30)
+  debouncedUpdateWindowSizeEnd = debounce(this.updateWindowSizeEnd, 30);
 
   handleWrapperLeave = () => {
     this.setState({ isResizing: false });
-  }
+  };
 
   handleMouseDown = () => {
     this.setState({ isResizing: true });
-  }
+  };
 
   handleMouseUp = () => {
     this.setState({ isResizing: false });
-  }
+  };
 
-  handleMouseMove = e => {
+  handleMouseMove = (e) => {
     if (!this.state.isResizing || this.state.isWindowResizing) return;
     e.preventDefault();
 
@@ -410,19 +408,19 @@ export default class Dock extends Component {
     const { clientX: x, clientY: y } = e;
     let size;
 
-    switch(position) {
-    case 'left':
-      size = fluid ? x / fullWidth : x;
-      break;
-    case 'right':
-      size = fluid ? (fullWidth - x) / fullWidth : (fullWidth - x);
-      break;
-    case 'top':
-      size = fluid ? y / fullHeight : y;
-      break;
-    case 'bottom':
-      size = fluid ? (fullHeight - y) / fullHeight : (fullHeight - y);
-      break;
+    switch (position) {
+      case 'left':
+        size = fluid ? x / fullWidth : x;
+        break;
+      case 'right':
+        size = fluid ? (fullWidth - x) / fullWidth : fullWidth - x;
+        break;
+      case 'top':
+        size = fluid ? y / fullHeight : y;
+        break;
+      case 'bottom':
+        size = fluid ? (fullHeight - y) / fullHeight : fullHeight - y;
+        break;
     }
 
     this.props.onSizeChange && this.props.onSizeChange(size);
@@ -430,5 +428,5 @@ export default class Dock extends Component {
     if (!isControlled) {
       this.setState({ size });
     }
-  }
+  };
 }
diff --git a/packages/react-dock/src/autoprefix.js b/packages/react-dock/src/autoprefix.js
index dd891735..f4c57d16 100644
--- a/packages/react-dock/src/autoprefix.js
+++ b/packages/react-dock/src/autoprefix.js
@@ -29,22 +29,29 @@ const vendorSpecificProperties = [
   'transitionTimingFunction',
   'perspective',
   'perspectiveOrigin',
-  'userSelect'
+  'userSelect',
 ];
 
 const prefixes = ['Moz', 'Webkit', 'ms', 'O'];
 
 function prefixProp(key, value) {
   return prefixes.reduce(
-    (obj, pre) => (obj[pre + key[0].toUpperCase() + key.substr(1)] = value, obj),
+    (obj, pre) => (
+      (obj[pre + key[0].toUpperCase() + key.substr(1)] = value), obj
+    ),
     {}
   );
 }
 
 export default function autoprefix(style) {
-  return Object.keys(style).reduce((obj, key) => (
-    vendorSpecificProperties.indexOf(key) !== -1 ? {
-      ...obj,
-      ...prefixProp(key, style[key])
-    } : obj), style);
+  return Object.keys(style).reduce(
+    (obj, key) =>
+      vendorSpecificProperties.indexOf(key) !== -1
+        ? {
+            ...obj,
+            ...prefixProp(key, style[key]),
+          }
+        : obj,
+    style
+  );
 }