diff --git a/.gitignore b/.gitignore
index f9d3d667..2e7a4d6d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 node_modules/
 example/dist/
-lib/
+#lib/
 npm-debug.log
diff --git a/lib/index.es5.js b/lib/index.es5.js
new file mode 100644
index 00000000..34f4212a
--- /dev/null
+++ b/lib/index.es5.js
@@ -0,0 +1,408 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var reactDom = require('react-dom');
+var Draggable = _interopDefault(require('react-draggable'));
+var Resizable = _interopDefault(require('re-resizable'));
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  return target;
+};
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+var resizableStyle = {
+  width: 'auto',
+  height: 'auto',
+  display: 'inline-block',
+  position: 'absolute',
+  top: 0,
+  left: 0
+};
+
+var Rnd = function (_React$Component) {
+  inherits(Rnd, _React$Component);
+
+  function Rnd(props) {
+    classCallCheck(this, Rnd);
+
+    var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
+
+    _this.state = {
+      z: props.z,
+      original: {
+        x: 0,
+        y: 0
+      },
+      bounds: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      maxWidth: props.maxWidth,
+      maxHeight: props.maxHeight,
+      isMounted: false
+    };
+    _this.onResizeStart = _this.onResizeStart.bind(_this);
+    _this.onResize = _this.onResize.bind(_this);
+    _this.onResizeStop = _this.onResizeStop.bind(_this);
+    _this.onDragStart = _this.onDragStart.bind(_this);
+    _this.onDrag = _this.onDrag.bind(_this);
+    _this.onDragStop = _this.onDragStop.bind(_this);
+    _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
+    return _this;
+  }
+
+  createClass(Rnd, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.z !== nextProps.z) {
+        this.setState({ z: nextProps.z });
+      }
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.setParentPosition();
+    }
+  }, {
+    key: 'getParentSize',
+    value: function getParentSize() {
+      return this.resizable.getParentSize();
+    }
+  }, {
+    key: 'getMaxSizesFromProps',
+    value: function getMaxSizesFromProps() {
+      var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+      var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
+      return { maxWidth: maxWidth, maxHeight: maxHeight };
+    }
+  }, {
+    key: 'getSelfElement',
+    value: function getSelfElement() {
+      if (!this) return null;
+      return reactDom.findDOMNode(this);
+    }
+  }, {
+    key: 'setParentPosition',
+    value: function setParentPosition() {
+      var element = this.getSelfElement();
+      if (element instanceof Element) {
+        var parent = element.parentNode;
+        if (!parent || typeof window === 'undefined') return;
+        if (!(parent instanceof HTMLElement)) return;
+        if (getComputedStyle(parent).position !== 'static') {
+          this.setState({ isMounted: true });
+          return;
+        }
+        parent.style.position = 'relative';
+        this.setState({ isMounted: true });
+      }
+    }
+  }, {
+    key: 'onDragStart',
+    value: function onDragStart(e, data) {
+      if (this.props.onDragStart) {
+        this.props.onDragStart(e, data);
+      }
+      if (!this.props.bounds) return;
+      var parent = this.resizable && this.resizable.parentNode;
+      var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+      if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+        return;
+      }
+      var targetRect = target.getBoundingClientRect();
+      var targetLeft = targetRect.left;
+      var targetTop = targetRect.top;
+      var parentRect = parent.getBoundingClientRect();
+      var parentLeft = parentRect.left;
+      var parentTop = parentRect.top;
+      var left = targetLeft - parentLeft;
+      var top = targetTop - parentTop;
+      if (!this.resizable) return;
+      this.setState({
+        bounds: {
+          top: top,
+          right: left + (target.offsetWidth - this.resizable.size.width),
+          bottom: this.props._freeBottomBounds // eslint-disable-line
+          ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height),
+          left: left
+        }
+      });
+    }
+  }, {
+    key: 'onDrag',
+    value: function onDrag(e, data) {
+      if (this.props.onDrag) {
+        this.props.onDrag(e, data);
+      }
+    }
+  }, {
+    key: 'onDragStop',
+    value: function onDragStop(e, data) {
+      if (this.props.onDragStop) {
+        this.props.onDragStop(e, data);
+      }
+    }
+  }, {
+    key: 'onResizeStart',
+    value: function onResizeStart(e, dir, refToElement) {
+      e.stopPropagation();
+      this.setState({
+        original: { x: this.draggable.state.x, y: this.draggable.state.y }
+      });
+      if (this.props.bounds) {
+        var parent = this.resizable && this.resizable.parentNode;
+        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+        var self = this.getSelfElement();
+        if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
+          var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
+              _maxWidth = _getMaxSizesFromProps.maxWidth,
+              _maxHeight = _getMaxSizesFromProps.maxHeight;
+
+          var parentSize = this.getParentSize();
+          if (_maxWidth && typeof _maxWidth === 'string') {
+            if (_maxWidth.endsWith('%')) {
+              var ratio = Number(_maxWidth.replace('%', '')) / 100;
+              _maxWidth = parentSize.width * ratio;
+            } else if (_maxWidth.endsWith('px')) {
+              _maxWidth = Number(_maxWidth.replace('px', ''));
+            }
+          }
+          if (_maxHeight && typeof _maxHeight === 'string') {
+            if (_maxHeight.endsWith('%')) {
+              var _ratio = Number(_maxHeight.replace('%', '')) / 100;
+              _maxHeight = parentSize.width * _ratio;
+            } else if (_maxHeight.endsWith('px')) {
+              _maxHeight = Number(_maxHeight.replace('px', ''));
+            }
+          }
+          var selfRect = self.getBoundingClientRect();
+          var selfLeft = selfRect.left;
+          var selfTop = selfRect.top;
+          var targetRect = target.getBoundingClientRect();
+          var targetLeft = targetRect.left;
+          var targetTop = targetRect.top;
+          if (/left/i.test(dir) && this.resizable) {
+            var max = selfLeft - targetLeft + this.resizable.size.width;
+            this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
+          }
+          if (/right/i.test(dir)) {
+            var _max = target.offsetWidth + (targetLeft - selfLeft);
+            this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
+          }
+          if (/top/i.test(dir) && this.resizable) {
+            var _max2 = selfTop - targetTop + this.resizable.size.height;
+            this.setState({
+              maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
+            });
+          }
+          if (/bottom/i.test(dir)) {
+            var _max3 = target.offsetHeight + (targetTop - selfTop);
+            this.setState({
+              maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
+            });
+          }
+        }
+      } else {
+        this.setState({
+          maxWidth: this.props.maxWidth,
+          maxHeight: this.props.maxHeight
+        });
+      }
+      if (this.props.onResizeStart) {
+        this.props.onResizeStart(e, dir, refToElement);
+      }
+    }
+  }, {
+    key: 'onResize',
+    value: function onResize(e, direction, refToResizableElement, delta) {
+      var x = void 0;
+      var y = void 0;
+      if (/left/i.test(direction)) {
+        x = this.state.original.x - delta.width;
+        this.draggable.setState({ x: x });
+      }
+      if (/top/i.test(direction)) {
+        y = this.state.original.y - delta.height;
+        this.draggable.setState({ y: y });
+      }
+      if (this.props.onResize) {
+        this.props.onResize(e, direction, refToResizableElement, delta, {
+          x: x || this.draggable.state.x,
+          y: y || this.draggable.state.y
+        });
+      }
+    }
+  }, {
+    key: 'onResizeStop',
+    value: function onResizeStop(e, direction, refToResizableElement, delta) {
+      var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
+          maxWidth = _getMaxSizesFromProps2.maxWidth,
+          maxHeight = _getMaxSizesFromProps2.maxHeight;
+
+      this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
+      if (this.props.onResizeStop) {
+        var _position = {
+          x: this.draggable.state.x,
+          y: this.draggable.state.y
+        };
+        this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
+      }
+    }
+  }, {
+    key: 'updateSize',
+    value: function updateSize(size) {
+      if (!this.resizable) return;
+      this.resizable.updateSize({ width: size.width, height: size.height });
+    }
+  }, {
+    key: 'updatePosition',
+    value: function updatePosition(position) {
+      this.draggable.setState(position);
+    }
+  }, {
+    key: 'updateZIndex',
+    value: function updateZIndex(z) {
+      this.setState({ z: z });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
+      var innerStyle = _extends({}, resizableStyle, {
+        zIndex: this.state.z
+      }, cursorStyle, this.props.style);
+      // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). 
+      if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null);
+      var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line
+      return React.createElement(
+        Draggable,
+        {
+          ref: function ref(c) {
+            _this2.draggable = c;
+          },
+          handle: this.props.dragHandleClassName,
+          defaultPosition: this.props.default,
+          onStart: this.onDragStart,
+          onDrag: this.onDrag,
+          onStop: this.onDragStop,
+          axis: this.props.dragAxis,
+          disabled: this.props.disableDragging,
+          grid: this.props.dragGrid,
+          bounds: this.props.bounds ? this.state.bounds : undefined,
+          position: this.props.position,
+          enableUserSelectHack: this.props.enableUserSelectHack,
+          cancel: this.props.cancel
+        },
+        React.createElement(
+          Resizable,
+          _extends({}, this.props.extendsProps, {
+            className: this.props.className,
+            ref: function ref(c) {
+              _this2.resizable = c;
+            },
+            defaultSize: this.props.default,
+            size: this.props.size,
+            enable: this.props.enableResizing,
+            onResizeStart: this.onResizeStart,
+            onResize: this.onResize,
+            onResizeStop: this.onResizeStop,
+            style: innerStyle,
+            minWidth: this.props.minWidth,
+            minHeight: this.props.minHeight,
+            maxWidth: this.state.maxWidth,
+            maxHeight: maxHeight,
+            grid: this.props.resizeGrid,
+            handleWrapperClass: this.props.resizeHandleWrapperClass,
+            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
+            lockAspectRatio: this.props.lockAspectRatio,
+            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
+            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
+            handleStyles: this.props.resizeHandleStyles,
+            handleClasses: this.props.resizeHandleClasses
+          }),
+          this.props.children
+        )
+      );
+    }
+  }]);
+  return Rnd;
+}(React.Component);
+
+Rnd.defaultProps = {
+  maxWidth: Number.MAX_SAFE_INTEGER,
+  maxHeight: Number.MAX_SAFE_INTEGER,
+  onResizeStart: function onResizeStart() {},
+  onResize: function onResize() {},
+  onResizeStop: function onResizeStop() {},
+  onDragStart: function onDragStart() {},
+  onDrag: function onDrag() {},
+  onDragStop: function onDragStop() {}
+};
+
+exports.default = Rnd;
+//# sourceMappingURL=index.es5.js.map
diff --git a/lib/index.es5.js.map b/lib/index.es5.js.map
new file mode 100644
index 00000000..0b2c97b0
--- /dev/null
+++ b/lib/index.es5.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.es5.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n  x: number,\n  y: number,\n};\n\nexport type DraggableData = {\n  node: HTMLElement,\n  deltaX: number,\n  deltaY: number,\n  lastX: number,\n  lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n  width: number,\n  height: number,\n};\n\nexport type RndResizeCallback = (\n  e: MouseEvent | TouchEvent,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef<'div'>,\n  delta: ResizableDelta,\n  position: Position,\n) => void;\n\ntype Size = {\n  width: string | number,\n  height: string | number,\n};\n\ntype State = {\n  z?: number,\n  original: Position,\n  bounds: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number,\n  },\n  maxWidth?: number | string,\n  maxHeight?: number | string,\n  isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n  bottom?: boolean,\n  bottomLeft?: boolean,\n  bottomRight?: boolean,\n  left?: boolean,\n  right?: boolean,\n  top?: boolean,\n  topLeft?: boolean,\n  topRight?: boolean,\n};\n\nexport type HandleClasses = {\n  bottom?: string,\n  bottomLeft?: string,\n  bottomRight?: string,\n  left?: string,\n  right?: string,\n  top?: string,\n  topLeft?: string,\n  topRight?: string,\n};\n\ntype Style = {\n  [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n  bottom?: Style,\n  bottomLeft?: Style,\n  bottomRight?: Style,\n  left?: Style,\n  right?: Style,\n  top?: Style,\n  topLeft?: Style,\n  topRight?: Style,\n};\n\ntype Props = {\n  z?: number,\n  dragGrid?: Grid,\n  default?: {\n    x: number,\n    y: number,\n  } & Size,\n  position?: {\n    x: number,\n    y: number,\n  },\n  size?: Size,\n  resizeGrid?: Grid,\n  bounds?: string,\n  onResizeStart?: RndResizeStartCallback,\n  onResize?: RndResizeCallback,\n  onResizeStop?: RndResizeCallback,\n  onDragStart?: RndDragCallback,\n  onDrag?: RndDragCallback,\n  onDragStop?: RndDragCallback,\n  className?: string,\n  style?: Style,\n  children?: React.Node,\n  enableResizing?: ResizeEnable,\n  extendsProps?: { [key: string]: any },\n  resizeHandleClasses?: HandleClasses,\n  resizeHandleStyles?: HandleStyles,\n  resizeHandleWrapperClass?: string,\n  resizeHandleWrapperStyle?: Style,\n  lockAspectRatio?: boolean | number,\n  lockAspectRatioExtraWidth?: number,\n  lockAspectRatioExtraHeight?: number,\n  maxHeight?: number | string,\n  maxWidth?: number | string,\n  minHeight?: number | string,\n  minWidth?: number | string,\n  dragAxis?: 'x' | 'y' | 'both' | 'none',\n  dragHandleClassName?: string,\n  disableDragging?: boolean,\n  cancel?: boolean,\n  enableUserSelectHack?: boolean,\n  _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n  width: 'auto',\n  height: 'auto',\n  display: 'inline-block',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n};\n\nexport default class Rnd extends React.Component<Props, State> {\n  static defaultProps = {\n    maxWidth: Number.MAX_SAFE_INTEGER,\n    maxHeight: Number.MAX_SAFE_INTEGER,\n    onResizeStart: () => {},\n    onResize: () => {},\n    onResizeStop: () => {},\n    onDragStart: () => {},\n    onDrag: () => {},\n    onDragStop: () => {}\n  };\n  resizable: React$ElementRef<typeof Resizable> | null;\n  draggable: Draggable;\n  onResizeStart: ResizeStartCallback;\n  onResize: ResizeCallback;\n  onResizeStop: ResizeCallback;\n  onDragStart: RndDragCallback;\n  onDrag: RndDragCallback;\n  onDragStop: RndDragCallback;\n  getMaxSizesFromProps: () => {\n    maxWidth: number | string,\n    maxHeight: number | string,\n  };\n  wrapper: HTMLElement;\n  parentId: string;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = {\n      z: props.z,\n      original: {\n        x: 0,\n        y: 0,\n      },\n      bounds: {\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n      },\n      maxWidth: props.maxWidth,\n      maxHeight: props.maxHeight,\n      isMounted: false,\n    };\n    this.onResizeStart = this.onResizeStart.bind(this);\n    this.onResize = this.onResize.bind(this);\n    this.onResizeStop = this.onResizeStop.bind(this);\n    this.onDragStart = this.onDragStart.bind(this);\n    this.onDrag = this.onDrag.bind(this);\n    this.onDragStop = this.onDragStop.bind(this);\n    this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n  }\n\n  componentWillReceiveProps(nextProps: Props) {\n    if (this.props.z !== nextProps.z) {\n      this.setState({ z: nextProps.z });\n    }\n  }\n\n  componentDidMount() {\n    this.setParentPosition();\n  }\n\n  getParentSize(): { width: number, height: number } {\n    return (this.resizable: any).getParentSize();\n  }\n\n  getMaxSizesFromProps(): {\n    maxWidth: number | string,\n    maxHeight: number | string,\n    } {\n    const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n    const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n    return { maxWidth, maxHeight };\n  }\n\n  getSelfElement(): null | Element | Text {\n    if (!this) return null;\n    return findDOMNode(this);\n  }\n\n  setParentPosition() {\n    const element = this.getSelfElement();\n    if (element instanceof Element) {\n      const parent = element.parentNode;\n      if (!parent || typeof window === 'undefined') return;\n      if (!(parent instanceof HTMLElement)) return;\n      if (getComputedStyle(parent).position !== 'static') {\n        this.setState({ isMounted: true });\n        return;\n      }\n      parent.style.position = 'relative';\n      this.setState({ isMounted: true });\n    }\n  }\n\n  onDragStart(e: Event, data: DraggableData) {\n    if (this.props.onDragStart) {\n      this.props.onDragStart(e, data);\n    }\n    if (!this.props.bounds) return;\n    const parent = this.resizable && this.resizable.parentNode;\n    const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n    if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n      return;\n    }\n    const targetRect = target.getBoundingClientRect();\n    const targetLeft = targetRect.left;\n    const targetTop = targetRect.top;\n    const parentRect = parent.getBoundingClientRect();\n    const parentLeft = parentRect.left;\n    const parentTop = parentRect.top;\n    const left = targetLeft - parentLeft;\n    const top = targetTop - parentTop;\n    if (!this.resizable) return;\n    this.setState({\n      bounds: {\n        top,\n        right: left + (target.offsetWidth - this.resizable.size.width),\n        bottom: this.props._freeBottomBounds // eslint-disable-line\n          ? 2147483647\n          : top + (target.offsetHeight - this.resizable.size.height),\n        left,\n      },\n    });\n  }\n\n  onDrag(e: Event, data: DraggableData) {\n    if (this.props.onDrag) {\n      this.props.onDrag(e, data);\n    }\n  }\n\n  onDragStop(e: Event, data: DraggableData) {\n    if (this.props.onDragStop) {\n      this.props.onDragStop(e, data);\n    }\n  }\n\n  onResizeStart(\n    e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,\n    dir: ResizeDirection,\n    refToElement: React.ElementRef<'div'>,\n  ) {\n    e.stopPropagation();\n    this.setState({\n      original: { x: this.draggable.state.x, y: this.draggable.state.y },\n    });\n    if (this.props.bounds) {\n      const parent = this.resizable && this.resizable.parentNode;\n      const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n      const self = this.getSelfElement();\n      if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n        let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n        const parentSize = this.getParentSize();\n        if (maxWidth && typeof maxWidth === 'string') {\n          if (maxWidth.endsWith('%')) {\n            const ratio = Number(maxWidth.replace('%', '')) / 100;\n            maxWidth = parentSize.width * ratio;\n          } else if (maxWidth.endsWith('px')) {\n            maxWidth = Number(maxWidth.replace('px', ''));\n          }\n        }\n        if (maxHeight && typeof maxHeight === 'string') {\n          if (maxHeight.endsWith('%')) {\n            const ratio = Number(maxHeight.replace('%', '')) / 100;\n            maxHeight = parentSize.width * ratio;\n          } else if (maxHeight.endsWith('px')) {\n            maxHeight = Number(maxHeight.replace('px', ''));\n          }\n        }\n        const selfRect = self.getBoundingClientRect();\n        const selfLeft = selfRect.left;\n        const selfTop = selfRect.top;\n        const targetRect = target.getBoundingClientRect();\n        const targetLeft = targetRect.left;\n        const targetTop = targetRect.top;\n        if (/left/i.test(dir) && this.resizable) {\n          const max = selfLeft - targetLeft + this.resizable.size.width;\n          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n        }\n        if (/right/i.test(dir)) {\n          const max = target.offsetWidth + (targetLeft - selfLeft);\n          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n        }\n        if (/top/i.test(dir) && this.resizable) {\n          const max = selfTop - targetTop + this.resizable.size.height;\n          this.setState({\n            maxHeight: max > Number(maxHeight) ? maxHeight : max,\n          });\n        }\n        if (/bottom/i.test(dir)) {\n          const max = target.offsetHeight + (targetTop - selfTop);\n          this.setState({\n            maxHeight: max > Number(maxHeight) ? maxHeight : max,\n          });\n        }\n      }\n    } else {\n      this.setState({\n        maxWidth: this.props.maxWidth,\n        maxHeight: this.props.maxHeight,\n      });\n    }\n    if (this.props.onResizeStart) {\n      this.props.onResizeStart(e, dir, refToElement);\n    }\n  }\n\n  onResize(\n    e: MouseEvent | TouchEvent,\n    direction: ResizeDirection,\n    refToResizableElement: React.ElementRef<'div'>,\n    delta: { height: number, width: number },\n  ) {\n    let x;\n    let y;\n    if (/left/i.test(direction)) {\n      x = this.state.original.x - delta.width;\n      this.draggable.setState({ x });\n    }\n    if (/top/i.test(direction)) {\n      y = this.state.original.y - delta.height;\n      this.draggable.setState({ y });\n    }\n    if (this.props.onResize) {\n      this.props.onResize(e, direction, refToResizableElement, delta, {\n        x: x || this.draggable.state.x,\n        y: y || this.draggable.state.y,\n      });\n    }\n  }\n\n  onResizeStop(\n    e: MouseEvent | TouchEvent,\n    direction: ResizeDirection,\n    refToResizableElement: HTMLDivElement,\n    delta: { height: number, width: number },\n  ) {\n    const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n    this.setState({ maxWidth, maxHeight });\n    if (this.props.onResizeStop) {\n      const position: Position = {\n        x: this.draggable.state.x,\n        y: this.draggable.state.y,\n      };\n      this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n    }\n  }\n\n  updateSize(size: { width: number | string, height: number | string }) {\n    if (!this.resizable) return;\n    this.resizable.updateSize({ width: size.width, height: size.height });\n  }\n\n  updatePosition(position: Position) {\n    this.draggable.setState(position);\n  }\n\n  updateZIndex(z: number) {\n    this.setState({ z });\n  }\n\n  render(): React.Node {\n    const cursorStyle =\n      this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n    const innerStyle = {\n      ...resizableStyle,\n      zIndex: this.state.z,\n      ...cursorStyle,\n      ...this.props.style,\n    };\n    // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n    if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return <div />;\n    const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n    return (\n      <Draggable\n        ref={(c: Draggable) => {\n          this.draggable = c;\n        }}\n        handle={this.props.dragHandleClassName}\n        defaultPosition={this.props.default}\n        onStart={this.onDragStart}\n        onDrag={this.onDrag}\n        onStop={this.onDragStop}\n        axis={this.props.dragAxis}\n        disabled={this.props.disableDragging}\n        grid={this.props.dragGrid}\n        bounds={this.props.bounds ? this.state.bounds : undefined}\n        position={this.props.position}\n        enableUserSelectHack={this.props.enableUserSelectHack}\n        cancel={this.props.cancel}\n      >\n        <Resizable\n          {...this.props.extendsProps}\n          className={this.props.className}\n          ref={(c: React$ElementRef<typeof Resizable> | null) => {\n            this.resizable = c;\n          }}\n          defaultSize={this.props.default}\n          size={this.props.size}\n          enable={this.props.enableResizing}\n          onResizeStart={this.onResizeStart}\n          onResize={this.onResize}\n          onResizeStop={this.onResizeStop}\n          style={innerStyle}\n          minWidth={this.props.minWidth}\n          minHeight={this.props.minHeight}\n          maxWidth={this.state.maxWidth}\n          maxHeight={maxHeight}\n          grid={this.props.resizeGrid}\n          handleWrapperClass={this.props.resizeHandleWrapperClass}\n          handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n          lockAspectRatio={this.props.lockAspectRatio}\n          lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n          lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n          handleStyles={this.props.resizeHandleStyles}\n          handleClasses={this.props.resizeHandleClasses}\n        >\n          {this.props.children}\n        </Resizable>\n      </Draggable>\n    );\n  }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"}
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 00000000..102a8b9f
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1,402 @@
+import { createElement, Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import Draggable from 'react-draggable';
+import Resizable from 're-resizable';
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  return target;
+};
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+var resizableStyle = {
+  width: 'auto',
+  height: 'auto',
+  display: 'inline-block',
+  position: 'absolute',
+  top: 0,
+  left: 0
+};
+
+var Rnd = function (_React$Component) {
+  inherits(Rnd, _React$Component);
+
+  function Rnd(props) {
+    classCallCheck(this, Rnd);
+
+    var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
+
+    _this.state = {
+      z: props.z,
+      original: {
+        x: 0,
+        y: 0
+      },
+      bounds: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      maxWidth: props.maxWidth,
+      maxHeight: props.maxHeight,
+      isMounted: false
+    };
+    _this.onResizeStart = _this.onResizeStart.bind(_this);
+    _this.onResize = _this.onResize.bind(_this);
+    _this.onResizeStop = _this.onResizeStop.bind(_this);
+    _this.onDragStart = _this.onDragStart.bind(_this);
+    _this.onDrag = _this.onDrag.bind(_this);
+    _this.onDragStop = _this.onDragStop.bind(_this);
+    _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
+    return _this;
+  }
+
+  createClass(Rnd, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.z !== nextProps.z) {
+        this.setState({ z: nextProps.z });
+      }
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.setParentPosition();
+    }
+  }, {
+    key: 'getParentSize',
+    value: function getParentSize() {
+      return this.resizable.getParentSize();
+    }
+  }, {
+    key: 'getMaxSizesFromProps',
+    value: function getMaxSizesFromProps() {
+      var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+      var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
+      return { maxWidth: maxWidth, maxHeight: maxHeight };
+    }
+  }, {
+    key: 'getSelfElement',
+    value: function getSelfElement() {
+      if (!this) return null;
+      return findDOMNode(this);
+    }
+  }, {
+    key: 'setParentPosition',
+    value: function setParentPosition() {
+      var element = this.getSelfElement();
+      if (element instanceof Element) {
+        var parent = element.parentNode;
+        if (!parent || typeof window === 'undefined') return;
+        if (!(parent instanceof HTMLElement)) return;
+        if (getComputedStyle(parent).position !== 'static') {
+          this.setState({ isMounted: true });
+          return;
+        }
+        parent.style.position = 'relative';
+        this.setState({ isMounted: true });
+      }
+    }
+  }, {
+    key: 'onDragStart',
+    value: function onDragStart(e, data) {
+      if (this.props.onDragStart) {
+        this.props.onDragStart(e, data);
+      }
+      if (!this.props.bounds) return;
+      var parent = this.resizable && this.resizable.parentNode;
+      var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+      if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+        return;
+      }
+      var targetRect = target.getBoundingClientRect();
+      var targetLeft = targetRect.left;
+      var targetTop = targetRect.top;
+      var parentRect = parent.getBoundingClientRect();
+      var parentLeft = parentRect.left;
+      var parentTop = parentRect.top;
+      var left = targetLeft - parentLeft;
+      var top = targetTop - parentTop;
+      if (!this.resizable) return;
+      this.setState({
+        bounds: {
+          top: top,
+          right: left + (target.offsetWidth - this.resizable.size.width),
+          bottom: this.props._freeBottomBounds // eslint-disable-line
+          ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height),
+          left: left
+        }
+      });
+    }
+  }, {
+    key: 'onDrag',
+    value: function onDrag(e, data) {
+      if (this.props.onDrag) {
+        this.props.onDrag(e, data);
+      }
+    }
+  }, {
+    key: 'onDragStop',
+    value: function onDragStop(e, data) {
+      if (this.props.onDragStop) {
+        this.props.onDragStop(e, data);
+      }
+    }
+  }, {
+    key: 'onResizeStart',
+    value: function onResizeStart(e, dir, refToElement) {
+      e.stopPropagation();
+      this.setState({
+        original: { x: this.draggable.state.x, y: this.draggable.state.y }
+      });
+      if (this.props.bounds) {
+        var parent = this.resizable && this.resizable.parentNode;
+        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+        var self = this.getSelfElement();
+        if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
+          var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
+              _maxWidth = _getMaxSizesFromProps.maxWidth,
+              _maxHeight = _getMaxSizesFromProps.maxHeight;
+
+          var parentSize = this.getParentSize();
+          if (_maxWidth && typeof _maxWidth === 'string') {
+            if (_maxWidth.endsWith('%')) {
+              var ratio = Number(_maxWidth.replace('%', '')) / 100;
+              _maxWidth = parentSize.width * ratio;
+            } else if (_maxWidth.endsWith('px')) {
+              _maxWidth = Number(_maxWidth.replace('px', ''));
+            }
+          }
+          if (_maxHeight && typeof _maxHeight === 'string') {
+            if (_maxHeight.endsWith('%')) {
+              var _ratio = Number(_maxHeight.replace('%', '')) / 100;
+              _maxHeight = parentSize.width * _ratio;
+            } else if (_maxHeight.endsWith('px')) {
+              _maxHeight = Number(_maxHeight.replace('px', ''));
+            }
+          }
+          var selfRect = self.getBoundingClientRect();
+          var selfLeft = selfRect.left;
+          var selfTop = selfRect.top;
+          var targetRect = target.getBoundingClientRect();
+          var targetLeft = targetRect.left;
+          var targetTop = targetRect.top;
+          if (/left/i.test(dir) && this.resizable) {
+            var max = selfLeft - targetLeft + this.resizable.size.width;
+            this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
+          }
+          if (/right/i.test(dir)) {
+            var _max = target.offsetWidth + (targetLeft - selfLeft);
+            this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
+          }
+          if (/top/i.test(dir) && this.resizable) {
+            var _max2 = selfTop - targetTop + this.resizable.size.height;
+            this.setState({
+              maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
+            });
+          }
+          if (/bottom/i.test(dir)) {
+            var _max3 = target.offsetHeight + (targetTop - selfTop);
+            this.setState({
+              maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
+            });
+          }
+        }
+      } else {
+        this.setState({
+          maxWidth: this.props.maxWidth,
+          maxHeight: this.props.maxHeight
+        });
+      }
+      if (this.props.onResizeStart) {
+        this.props.onResizeStart(e, dir, refToElement);
+      }
+    }
+  }, {
+    key: 'onResize',
+    value: function onResize(e, direction, refToResizableElement, delta) {
+      var x = void 0;
+      var y = void 0;
+      if (/left/i.test(direction)) {
+        x = this.state.original.x - delta.width;
+        this.draggable.setState({ x: x });
+      }
+      if (/top/i.test(direction)) {
+        y = this.state.original.y - delta.height;
+        this.draggable.setState({ y: y });
+      }
+      if (this.props.onResize) {
+        this.props.onResize(e, direction, refToResizableElement, delta, {
+          x: x || this.draggable.state.x,
+          y: y || this.draggable.state.y
+        });
+      }
+    }
+  }, {
+    key: 'onResizeStop',
+    value: function onResizeStop(e, direction, refToResizableElement, delta) {
+      var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
+          maxWidth = _getMaxSizesFromProps2.maxWidth,
+          maxHeight = _getMaxSizesFromProps2.maxHeight;
+
+      this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
+      if (this.props.onResizeStop) {
+        var _position = {
+          x: this.draggable.state.x,
+          y: this.draggable.state.y
+        };
+        this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
+      }
+    }
+  }, {
+    key: 'updateSize',
+    value: function updateSize(size) {
+      if (!this.resizable) return;
+      this.resizable.updateSize({ width: size.width, height: size.height });
+    }
+  }, {
+    key: 'updatePosition',
+    value: function updatePosition(position) {
+      this.draggable.setState(position);
+    }
+  }, {
+    key: 'updateZIndex',
+    value: function updateZIndex(z) {
+      this.setState({ z: z });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
+      var innerStyle = _extends({}, resizableStyle, {
+        zIndex: this.state.z
+      }, cursorStyle, this.props.style);
+      // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). 
+      if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return createElement('div', null);
+      var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line
+      return createElement(
+        Draggable,
+        {
+          ref: function ref(c) {
+            _this2.draggable = c;
+          },
+          handle: this.props.dragHandleClassName,
+          defaultPosition: this.props.default,
+          onStart: this.onDragStart,
+          onDrag: this.onDrag,
+          onStop: this.onDragStop,
+          axis: this.props.dragAxis,
+          disabled: this.props.disableDragging,
+          grid: this.props.dragGrid,
+          bounds: this.props.bounds ? this.state.bounds : undefined,
+          position: this.props.position,
+          enableUserSelectHack: this.props.enableUserSelectHack,
+          cancel: this.props.cancel
+        },
+        createElement(
+          Resizable,
+          _extends({}, this.props.extendsProps, {
+            className: this.props.className,
+            ref: function ref(c) {
+              _this2.resizable = c;
+            },
+            defaultSize: this.props.default,
+            size: this.props.size,
+            enable: this.props.enableResizing,
+            onResizeStart: this.onResizeStart,
+            onResize: this.onResize,
+            onResizeStop: this.onResizeStop,
+            style: innerStyle,
+            minWidth: this.props.minWidth,
+            minHeight: this.props.minHeight,
+            maxWidth: this.state.maxWidth,
+            maxHeight: maxHeight,
+            grid: this.props.resizeGrid,
+            handleWrapperClass: this.props.resizeHandleWrapperClass,
+            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
+            lockAspectRatio: this.props.lockAspectRatio,
+            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
+            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
+            handleStyles: this.props.resizeHandleStyles,
+            handleClasses: this.props.resizeHandleClasses
+          }),
+          this.props.children
+        )
+      );
+    }
+  }]);
+  return Rnd;
+}(Component);
+
+Rnd.defaultProps = {
+  maxWidth: Number.MAX_SAFE_INTEGER,
+  maxHeight: Number.MAX_SAFE_INTEGER,
+  onResizeStart: function onResizeStart() {},
+  onResize: function onResize() {},
+  onResizeStop: function onResizeStop() {},
+  onDragStart: function onDragStart() {},
+  onDrag: function onDrag() {},
+  onDragStop: function onDragStop() {}
+};
+
+export default Rnd;
+//# sourceMappingURL=index.js.map
diff --git a/lib/index.js.map b/lib/index.js.map
new file mode 100644
index 00000000..ab402dcb
--- /dev/null
+++ b/lib/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n  x: number,\n  y: number,\n};\n\nexport type DraggableData = {\n  node: HTMLElement,\n  deltaX: number,\n  deltaY: number,\n  lastX: number,\n  lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n  width: number,\n  height: number,\n};\n\nexport type RndResizeCallback = (\n  e: MouseEvent | TouchEvent,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef<'div'>,\n  delta: ResizableDelta,\n  position: Position,\n) => void;\n\ntype Size = {\n  width: string | number,\n  height: string | number,\n};\n\ntype State = {\n  z?: number,\n  original: Position,\n  bounds: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number,\n  },\n  maxWidth?: number | string,\n  maxHeight?: number | string,\n  isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n  bottom?: boolean,\n  bottomLeft?: boolean,\n  bottomRight?: boolean,\n  left?: boolean,\n  right?: boolean,\n  top?: boolean,\n  topLeft?: boolean,\n  topRight?: boolean,\n};\n\nexport type HandleClasses = {\n  bottom?: string,\n  bottomLeft?: string,\n  bottomRight?: string,\n  left?: string,\n  right?: string,\n  top?: string,\n  topLeft?: string,\n  topRight?: string,\n};\n\ntype Style = {\n  [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n  bottom?: Style,\n  bottomLeft?: Style,\n  bottomRight?: Style,\n  left?: Style,\n  right?: Style,\n  top?: Style,\n  topLeft?: Style,\n  topRight?: Style,\n};\n\ntype Props = {\n  z?: number,\n  dragGrid?: Grid,\n  default?: {\n    x: number,\n    y: number,\n  } & Size,\n  position?: {\n    x: number,\n    y: number,\n  },\n  size?: Size,\n  resizeGrid?: Grid,\n  bounds?: string,\n  onResizeStart?: RndResizeStartCallback,\n  onResize?: RndResizeCallback,\n  onResizeStop?: RndResizeCallback,\n  onDragStart?: RndDragCallback,\n  onDrag?: RndDragCallback,\n  onDragStop?: RndDragCallback,\n  className?: string,\n  style?: Style,\n  children?: React.Node,\n  enableResizing?: ResizeEnable,\n  extendsProps?: { [key: string]: any },\n  resizeHandleClasses?: HandleClasses,\n  resizeHandleStyles?: HandleStyles,\n  resizeHandleWrapperClass?: string,\n  resizeHandleWrapperStyle?: Style,\n  lockAspectRatio?: boolean | number,\n  lockAspectRatioExtraWidth?: number,\n  lockAspectRatioExtraHeight?: number,\n  maxHeight?: number | string,\n  maxWidth?: number | string,\n  minHeight?: number | string,\n  minWidth?: number | string,\n  dragAxis?: 'x' | 'y' | 'both' | 'none',\n  dragHandleClassName?: string,\n  disableDragging?: boolean,\n  cancel?: boolean,\n  enableUserSelectHack?: boolean,\n  _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n  width: 'auto',\n  height: 'auto',\n  display: 'inline-block',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n};\n\nexport default class Rnd extends React.Component<Props, State> {\n  static defaultProps = {\n    maxWidth: Number.MAX_SAFE_INTEGER,\n    maxHeight: Number.MAX_SAFE_INTEGER,\n    onResizeStart: () => {},\n    onResize: () => {},\n    onResizeStop: () => {},\n    onDragStart: () => {},\n    onDrag: () => {},\n    onDragStop: () => {}\n  };\n  resizable: React$ElementRef<typeof Resizable> | null;\n  draggable: Draggable;\n  onResizeStart: ResizeStartCallback;\n  onResize: ResizeCallback;\n  onResizeStop: ResizeCallback;\n  onDragStart: RndDragCallback;\n  onDrag: RndDragCallback;\n  onDragStop: RndDragCallback;\n  getMaxSizesFromProps: () => {\n    maxWidth: number | string,\n    maxHeight: number | string,\n  };\n  wrapper: HTMLElement;\n  parentId: string;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = {\n      z: props.z,\n      original: {\n        x: 0,\n        y: 0,\n      },\n      bounds: {\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n      },\n      maxWidth: props.maxWidth,\n      maxHeight: props.maxHeight,\n      isMounted: false,\n    };\n    this.onResizeStart = this.onResizeStart.bind(this);\n    this.onResize = this.onResize.bind(this);\n    this.onResizeStop = this.onResizeStop.bind(this);\n    this.onDragStart = this.onDragStart.bind(this);\n    this.onDrag = this.onDrag.bind(this);\n    this.onDragStop = this.onDragStop.bind(this);\n    this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n  }\n\n  componentWillReceiveProps(nextProps: Props) {\n    if (this.props.z !== nextProps.z) {\n      this.setState({ z: nextProps.z });\n    }\n  }\n\n  componentDidMount() {\n    this.setParentPosition();\n  }\n\n  getParentSize(): { width: number, height: number } {\n    return (this.resizable: any).getParentSize();\n  }\n\n  getMaxSizesFromProps(): {\n    maxWidth: number | string,\n    maxHeight: number | string,\n    } {\n    const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n    const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n    return { maxWidth, maxHeight };\n  }\n\n  getSelfElement(): null | Element | Text {\n    if (!this) return null;\n    return findDOMNode(this);\n  }\n\n  setParentPosition() {\n    const element = this.getSelfElement();\n    if (element instanceof Element) {\n      const parent = element.parentNode;\n      if (!parent || typeof window === 'undefined') return;\n      if (!(parent instanceof HTMLElement)) return;\n      if (getComputedStyle(parent).position !== 'static') {\n        this.setState({ isMounted: true });\n        return;\n      }\n      parent.style.position = 'relative';\n      this.setState({ isMounted: true });\n    }\n  }\n\n  onDragStart(e: Event, data: DraggableData) {\n    if (this.props.onDragStart) {\n      this.props.onDragStart(e, data);\n    }\n    if (!this.props.bounds) return;\n    const parent = this.resizable && this.resizable.parentNode;\n    const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n    if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n      return;\n    }\n    const targetRect = target.getBoundingClientRect();\n    const targetLeft = targetRect.left;\n    const targetTop = targetRect.top;\n    const parentRect = parent.getBoundingClientRect();\n    const parentLeft = parentRect.left;\n    const parentTop = parentRect.top;\n    const left = targetLeft - parentLeft;\n    const top = targetTop - parentTop;\n    if (!this.resizable) return;\n    this.setState({\n      bounds: {\n        top,\n        right: left + (target.offsetWidth - this.resizable.size.width),\n        bottom: this.props._freeBottomBounds // eslint-disable-line\n          ? 2147483647\n          : top + (target.offsetHeight - this.resizable.size.height),\n        left,\n      },\n    });\n  }\n\n  onDrag(e: Event, data: DraggableData) {\n    if (this.props.onDrag) {\n      this.props.onDrag(e, data);\n    }\n  }\n\n  onDragStop(e: Event, data: DraggableData) {\n    if (this.props.onDragStop) {\n      this.props.onDragStop(e, data);\n    }\n  }\n\n  onResizeStart(\n    e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,\n    dir: ResizeDirection,\n    refToElement: React.ElementRef<'div'>,\n  ) {\n    e.stopPropagation();\n    this.setState({\n      original: { x: this.draggable.state.x, y: this.draggable.state.y },\n    });\n    if (this.props.bounds) {\n      const parent = this.resizable && this.resizable.parentNode;\n      const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n      const self = this.getSelfElement();\n      if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n        let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n        const parentSize = this.getParentSize();\n        if (maxWidth && typeof maxWidth === 'string') {\n          if (maxWidth.endsWith('%')) {\n            const ratio = Number(maxWidth.replace('%', '')) / 100;\n            maxWidth = parentSize.width * ratio;\n          } else if (maxWidth.endsWith('px')) {\n            maxWidth = Number(maxWidth.replace('px', ''));\n          }\n        }\n        if (maxHeight && typeof maxHeight === 'string') {\n          if (maxHeight.endsWith('%')) {\n            const ratio = Number(maxHeight.replace('%', '')) / 100;\n            maxHeight = parentSize.width * ratio;\n          } else if (maxHeight.endsWith('px')) {\n            maxHeight = Number(maxHeight.replace('px', ''));\n          }\n        }\n        const selfRect = self.getBoundingClientRect();\n        const selfLeft = selfRect.left;\n        const selfTop = selfRect.top;\n        const targetRect = target.getBoundingClientRect();\n        const targetLeft = targetRect.left;\n        const targetTop = targetRect.top;\n        if (/left/i.test(dir) && this.resizable) {\n          const max = selfLeft - targetLeft + this.resizable.size.width;\n          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n        }\n        if (/right/i.test(dir)) {\n          const max = target.offsetWidth + (targetLeft - selfLeft);\n          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n        }\n        if (/top/i.test(dir) && this.resizable) {\n          const max = selfTop - targetTop + this.resizable.size.height;\n          this.setState({\n            maxHeight: max > Number(maxHeight) ? maxHeight : max,\n          });\n        }\n        if (/bottom/i.test(dir)) {\n          const max = target.offsetHeight + (targetTop - selfTop);\n          this.setState({\n            maxHeight: max > Number(maxHeight) ? maxHeight : max,\n          });\n        }\n      }\n    } else {\n      this.setState({\n        maxWidth: this.props.maxWidth,\n        maxHeight: this.props.maxHeight,\n      });\n    }\n    if (this.props.onResizeStart) {\n      this.props.onResizeStart(e, dir, refToElement);\n    }\n  }\n\n  onResize(\n    e: MouseEvent | TouchEvent,\n    direction: ResizeDirection,\n    refToResizableElement: React.ElementRef<'div'>,\n    delta: { height: number, width: number },\n  ) {\n    let x;\n    let y;\n    if (/left/i.test(direction)) {\n      x = this.state.original.x - delta.width;\n      this.draggable.setState({ x });\n    }\n    if (/top/i.test(direction)) {\n      y = this.state.original.y - delta.height;\n      this.draggable.setState({ y });\n    }\n    if (this.props.onResize) {\n      this.props.onResize(e, direction, refToResizableElement, delta, {\n        x: x || this.draggable.state.x,\n        y: y || this.draggable.state.y,\n      });\n    }\n  }\n\n  onResizeStop(\n    e: MouseEvent | TouchEvent,\n    direction: ResizeDirection,\n    refToResizableElement: HTMLDivElement,\n    delta: { height: number, width: number },\n  ) {\n    const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n    this.setState({ maxWidth, maxHeight });\n    if (this.props.onResizeStop) {\n      const position: Position = {\n        x: this.draggable.state.x,\n        y: this.draggable.state.y,\n      };\n      this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n    }\n  }\n\n  updateSize(size: { width: number | string, height: number | string }) {\n    if (!this.resizable) return;\n    this.resizable.updateSize({ width: size.width, height: size.height });\n  }\n\n  updatePosition(position: Position) {\n    this.draggable.setState(position);\n  }\n\n  updateZIndex(z: number) {\n    this.setState({ z });\n  }\n\n  render(): React.Node {\n    const cursorStyle =\n      this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n    const innerStyle = {\n      ...resizableStyle,\n      zIndex: this.state.z,\n      ...cursorStyle,\n      ...this.props.style,\n    };\n    // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n    if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return <div />;\n    const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n    return (\n      <Draggable\n        ref={(c: Draggable) => {\n          this.draggable = c;\n        }}\n        handle={this.props.dragHandleClassName}\n        defaultPosition={this.props.default}\n        onStart={this.onDragStart}\n        onDrag={this.onDrag}\n        onStop={this.onDragStop}\n        axis={this.props.dragAxis}\n        disabled={this.props.disableDragging}\n        grid={this.props.dragGrid}\n        bounds={this.props.bounds ? this.state.bounds : undefined}\n        position={this.props.position}\n        enableUserSelectHack={this.props.enableUserSelectHack}\n        cancel={this.props.cancel}\n      >\n        <Resizable\n          {...this.props.extendsProps}\n          className={this.props.className}\n          ref={(c: React$ElementRef<typeof Resizable> | null) => {\n            this.resizable = c;\n          }}\n          defaultSize={this.props.default}\n          size={this.props.size}\n          enable={this.props.enableResizing}\n          onResizeStart={this.onResizeStart}\n          onResize={this.onResize}\n          onResizeStop={this.onResizeStop}\n          style={innerStyle}\n          minWidth={this.props.minWidth}\n          minHeight={this.props.minHeight}\n          maxWidth={this.state.maxWidth}\n          maxHeight={maxHeight}\n          grid={this.props.resizeGrid}\n          handleWrapperClass={this.props.resizeHandleWrapperClass}\n          handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n          lockAspectRatio={this.props.lockAspectRatio}\n          lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n          lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n          handleStyles={this.props.resizeHandleStyles}\n          handleClasses={this.props.resizeHandleClasses}\n        >\n          {this.props.children}\n        </Resizable>\n      </Draggable>\n    );\n  }\n}\n"],"names":["resizableStyle","Rnd","props","state","z","maxWidth","maxHeight","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","position","isMounted","style","e","data","bounds","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","left","targetTop","top","parentRect","parentLeft","parentTop","offsetWidth","size","width","_freeBottomBounds","offsetHeight","height","dir","refToElement","stopPropagation","x","draggable","y","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","original","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"}
\ No newline at end of file
diff --git a/lib/react-rnd.umd.js b/lib/react-rnd.umd.js
new file mode 100644
index 00000000..54bc465b
--- /dev/null
+++ b/lib/react-rnd.umd.js
@@ -0,0 +1,410 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-draggable', 're-resizable'], factory) :
+  (factory((global['react-rnd'] = {}),global.React,global.ReactDOM,global.Draggable,global.Resizable));
+}(this, (function (exports,React,reactDom,Draggable,Resizable) { 'use strict';
+
+  Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable;
+  Resizable = Resizable && Resizable.hasOwnProperty('default') ? Resizable['default'] : Resizable;
+
+  var classCallCheck = function (instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  };
+
+  var createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  var inherits = function (subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  };
+
+  var possibleConstructorReturn = function (self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  };
+
+  var resizableStyle = {
+    width: 'auto',
+    height: 'auto',
+    display: 'inline-block',
+    position: 'absolute',
+    top: 0,
+    left: 0
+  };
+
+  var Rnd = function (_React$Component) {
+    inherits(Rnd, _React$Component);
+
+    function Rnd(props) {
+      classCallCheck(this, Rnd);
+
+      var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
+
+      _this.state = {
+        z: props.z,
+        original: {
+          x: 0,
+          y: 0
+        },
+        bounds: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        maxWidth: props.maxWidth,
+        maxHeight: props.maxHeight,
+        isMounted: false
+      };
+      _this.onResizeStart = _this.onResizeStart.bind(_this);
+      _this.onResize = _this.onResize.bind(_this);
+      _this.onResizeStop = _this.onResizeStop.bind(_this);
+      _this.onDragStart = _this.onDragStart.bind(_this);
+      _this.onDrag = _this.onDrag.bind(_this);
+      _this.onDragStop = _this.onDragStop.bind(_this);
+      _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
+      return _this;
+    }
+
+    createClass(Rnd, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (this.props.z !== nextProps.z) {
+          this.setState({ z: nextProps.z });
+        }
+      }
+    }, {
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.setParentPosition();
+      }
+    }, {
+      key: 'getParentSize',
+      value: function getParentSize() {
+        return this.resizable.getParentSize();
+      }
+    }, {
+      key: 'getMaxSizesFromProps',
+      value: function getMaxSizesFromProps() {
+        var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+        var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
+        return { maxWidth: maxWidth, maxHeight: maxHeight };
+      }
+    }, {
+      key: 'getSelfElement',
+      value: function getSelfElement() {
+        if (!this) return null;
+        return reactDom.findDOMNode(this);
+      }
+    }, {
+      key: 'setParentPosition',
+      value: function setParentPosition() {
+        var element = this.getSelfElement();
+        if (element instanceof Element) {
+          var parent = element.parentNode;
+          if (!parent || typeof window === 'undefined') return;
+          if (!(parent instanceof HTMLElement)) return;
+          if (getComputedStyle(parent).position !== 'static') {
+            this.setState({ isMounted: true });
+            return;
+          }
+          parent.style.position = 'relative';
+          this.setState({ isMounted: true });
+        }
+      }
+    }, {
+      key: 'onDragStart',
+      value: function onDragStart(e, data) {
+        if (this.props.onDragStart) {
+          this.props.onDragStart(e, data);
+        }
+        if (!this.props.bounds) return;
+        var parent = this.resizable && this.resizable.parentNode;
+        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+        if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+          return;
+        }
+        var targetRect = target.getBoundingClientRect();
+        var targetLeft = targetRect.left;
+        var targetTop = targetRect.top;
+        var parentRect = parent.getBoundingClientRect();
+        var parentLeft = parentRect.left;
+        var parentTop = parentRect.top;
+        var left = targetLeft - parentLeft;
+        var top = targetTop - parentTop;
+        if (!this.resizable) return;
+        this.setState({
+          bounds: {
+            top: top,
+            right: left + (target.offsetWidth - this.resizable.size.width),
+            bottom: this.props._freeBottomBounds // eslint-disable-line
+            ? 2147483647 : top + (target.offsetHeight - this.resizable.size.height),
+            left: left
+          }
+        });
+      }
+    }, {
+      key: 'onDrag',
+      value: function onDrag(e, data) {
+        if (this.props.onDrag) {
+          this.props.onDrag(e, data);
+        }
+      }
+    }, {
+      key: 'onDragStop',
+      value: function onDragStop(e, data) {
+        if (this.props.onDragStop) {
+          this.props.onDragStop(e, data);
+        }
+      }
+    }, {
+      key: 'onResizeStart',
+      value: function onResizeStart(e, dir, refToElement) {
+        e.stopPropagation();
+        this.setState({
+          original: { x: this.draggable.state.x, y: this.draggable.state.y }
+        });
+        if (this.props.bounds) {
+          var parent = this.resizable && this.resizable.parentNode;
+          var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+          var self = this.getSelfElement();
+          if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
+            var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
+                _maxWidth = _getMaxSizesFromProps.maxWidth,
+                _maxHeight = _getMaxSizesFromProps.maxHeight;
+
+            var parentSize = this.getParentSize();
+            if (_maxWidth && typeof _maxWidth === 'string') {
+              if (_maxWidth.endsWith('%')) {
+                var ratio = Number(_maxWidth.replace('%', '')) / 100;
+                _maxWidth = parentSize.width * ratio;
+              } else if (_maxWidth.endsWith('px')) {
+                _maxWidth = Number(_maxWidth.replace('px', ''));
+              }
+            }
+            if (_maxHeight && typeof _maxHeight === 'string') {
+              if (_maxHeight.endsWith('%')) {
+                var _ratio = Number(_maxHeight.replace('%', '')) / 100;
+                _maxHeight = parentSize.width * _ratio;
+              } else if (_maxHeight.endsWith('px')) {
+                _maxHeight = Number(_maxHeight.replace('px', ''));
+              }
+            }
+            var selfRect = self.getBoundingClientRect();
+            var selfLeft = selfRect.left;
+            var selfTop = selfRect.top;
+            var targetRect = target.getBoundingClientRect();
+            var targetLeft = targetRect.left;
+            var targetTop = targetRect.top;
+            if (/left/i.test(dir) && this.resizable) {
+              var max = selfLeft - targetLeft + this.resizable.size.width;
+              this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
+            }
+            if (/right/i.test(dir)) {
+              var _max = target.offsetWidth + (targetLeft - selfLeft);
+              this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
+            }
+            if (/top/i.test(dir) && this.resizable) {
+              var _max2 = selfTop - targetTop + this.resizable.size.height;
+              this.setState({
+                maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
+              });
+            }
+            if (/bottom/i.test(dir)) {
+              var _max3 = target.offsetHeight + (targetTop - selfTop);
+              this.setState({
+                maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
+              });
+            }
+          }
+        } else {
+          this.setState({
+            maxWidth: this.props.maxWidth,
+            maxHeight: this.props.maxHeight
+          });
+        }
+        if (this.props.onResizeStart) {
+          this.props.onResizeStart(e, dir, refToElement);
+        }
+      }
+    }, {
+      key: 'onResize',
+      value: function onResize(e, direction, refToResizableElement, delta) {
+        var x = void 0;
+        var y = void 0;
+        if (/left/i.test(direction)) {
+          x = this.state.original.x - delta.width;
+          this.draggable.setState({ x: x });
+        }
+        if (/top/i.test(direction)) {
+          y = this.state.original.y - delta.height;
+          this.draggable.setState({ y: y });
+        }
+        if (this.props.onResize) {
+          this.props.onResize(e, direction, refToResizableElement, delta, {
+            x: x || this.draggable.state.x,
+            y: y || this.draggable.state.y
+          });
+        }
+      }
+    }, {
+      key: 'onResizeStop',
+      value: function onResizeStop(e, direction, refToResizableElement, delta) {
+        var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
+            maxWidth = _getMaxSizesFromProps2.maxWidth,
+            maxHeight = _getMaxSizesFromProps2.maxHeight;
+
+        this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
+        if (this.props.onResizeStop) {
+          var _position = {
+            x: this.draggable.state.x,
+            y: this.draggable.state.y
+          };
+          this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
+        }
+      }
+    }, {
+      key: 'updateSize',
+      value: function updateSize(size) {
+        if (!this.resizable) return;
+        this.resizable.updateSize({ width: size.width, height: size.height });
+      }
+    }, {
+      key: 'updatePosition',
+      value: function updatePosition(position) {
+        this.draggable.setState(position);
+      }
+    }, {
+      key: 'updateZIndex',
+      value: function updateZIndex(z) {
+        this.setState({ z: z });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
+
+        var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
+        var innerStyle = _extends({}, resizableStyle, {
+          zIndex: this.state.z
+        }, cursorStyle, this.props.style);
+        // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). 
+        if (!this.state.isMounted && !this.props.hasOwnProperty("absolutePos")) return React.createElement('div', null);
+        var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line
+        return React.createElement(
+          Draggable,
+          {
+            ref: function ref(c) {
+              _this2.draggable = c;
+            },
+            handle: this.props.dragHandleClassName,
+            defaultPosition: this.props.default,
+            onStart: this.onDragStart,
+            onDrag: this.onDrag,
+            onStop: this.onDragStop,
+            axis: this.props.dragAxis,
+            disabled: this.props.disableDragging,
+            grid: this.props.dragGrid,
+            bounds: this.props.bounds ? this.state.bounds : undefined,
+            position: this.props.position,
+            enableUserSelectHack: this.props.enableUserSelectHack,
+            cancel: this.props.cancel
+          },
+          React.createElement(
+            Resizable,
+            _extends({}, this.props.extendsProps, {
+              className: this.props.className,
+              ref: function ref(c) {
+                _this2.resizable = c;
+              },
+              defaultSize: this.props.default,
+              size: this.props.size,
+              enable: this.props.enableResizing,
+              onResizeStart: this.onResizeStart,
+              onResize: this.onResize,
+              onResizeStop: this.onResizeStop,
+              style: innerStyle,
+              minWidth: this.props.minWidth,
+              minHeight: this.props.minHeight,
+              maxWidth: this.state.maxWidth,
+              maxHeight: maxHeight,
+              grid: this.props.resizeGrid,
+              handleWrapperClass: this.props.resizeHandleWrapperClass,
+              handleWrapperStyle: this.props.resizeHandleWrapperStyle,
+              lockAspectRatio: this.props.lockAspectRatio,
+              lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
+              lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
+              handleStyles: this.props.resizeHandleStyles,
+              handleClasses: this.props.resizeHandleClasses
+            }),
+            this.props.children
+          )
+        );
+      }
+    }]);
+    return Rnd;
+  }(React.Component);
+
+  Rnd.defaultProps = {
+    maxWidth: Number.MAX_SAFE_INTEGER,
+    maxHeight: Number.MAX_SAFE_INTEGER,
+    onResizeStart: function onResizeStart() {},
+    onResize: function onResize() {},
+    onResizeStop: function onResizeStop() {},
+    onDragStart: function onDragStart() {},
+    onDrag: function onDrag() {},
+    onDragStop: function onDragStop() {}
+  };
+
+  exports.default = Rnd;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=react-rnd.umd.js.map
diff --git a/lib/react-rnd.umd.js.map b/lib/react-rnd.umd.js.map
new file mode 100644
index 00000000..6d80248a
--- /dev/null
+++ b/lib/react-rnd.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"react-rnd.umd.js","sources":["../src/index.js"],"sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport Resizable from 're-resizable';\nimport type { ResizeDirection, ResizeCallback, ResizeStartCallback } from 're-resizable';\n\nexport type Grid = [number, number];\n\nexport type Position = {\n  x: number,\n  y: number,\n};\n\nexport type DraggableData = {\n  node: HTMLElement,\n  deltaX: number,\n  deltaY: number,\n  lastX: number,\n  lastY: number,\n} & Position;\n\nexport type RndDragCallback = (e: Event, data: DraggableData) => void | false;\n\nexport type RndResizeStartCallback = (\n  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef<'div'>,\n) => void;\n\nexport type ResizableDelta = {\n  width: number,\n  height: number,\n};\n\nexport type RndResizeCallback = (\n  e: MouseEvent | TouchEvent,\n  dir: ResizeDirection,\n  refToElement: React.ElementRef<'div'>,\n  delta: ResizableDelta,\n  position: Position,\n) => void;\n\ntype Size = {\n  width: string | number,\n  height: string | number,\n};\n\ntype State = {\n  z?: number,\n  original: Position,\n  bounds: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number,\n  },\n  maxWidth?: number | string,\n  maxHeight?: number | string,\n  isMounted: boolean,\n};\n\nexport type ResizeEnable = {\n  bottom?: boolean,\n  bottomLeft?: boolean,\n  bottomRight?: boolean,\n  left?: boolean,\n  right?: boolean,\n  top?: boolean,\n  topLeft?: boolean,\n  topRight?: boolean,\n};\n\nexport type HandleClasses = {\n  bottom?: string,\n  bottomLeft?: string,\n  bottomRight?: string,\n  left?: string,\n  right?: string,\n  top?: string,\n  topLeft?: string,\n  topRight?: string,\n};\n\ntype Style = {\n  [key: string]: string | number,\n};\n\nexport type HandleStyles = {\n  bottom?: Style,\n  bottomLeft?: Style,\n  bottomRight?: Style,\n  left?: Style,\n  right?: Style,\n  top?: Style,\n  topLeft?: Style,\n  topRight?: Style,\n};\n\ntype Props = {\n  z?: number,\n  dragGrid?: Grid,\n  default?: {\n    x: number,\n    y: number,\n  } & Size,\n  position?: {\n    x: number,\n    y: number,\n  },\n  size?: Size,\n  resizeGrid?: Grid,\n  bounds?: string,\n  onResizeStart?: RndResizeStartCallback,\n  onResize?: RndResizeCallback,\n  onResizeStop?: RndResizeCallback,\n  onDragStart?: RndDragCallback,\n  onDrag?: RndDragCallback,\n  onDragStop?: RndDragCallback,\n  className?: string,\n  style?: Style,\n  children?: React.Node,\n  enableResizing?: ResizeEnable,\n  extendsProps?: { [key: string]: any },\n  resizeHandleClasses?: HandleClasses,\n  resizeHandleStyles?: HandleStyles,\n  resizeHandleWrapperClass?: string,\n  resizeHandleWrapperStyle?: Style,\n  lockAspectRatio?: boolean | number,\n  lockAspectRatioExtraWidth?: number,\n  lockAspectRatioExtraHeight?: number,\n  maxHeight?: number | string,\n  maxWidth?: number | string,\n  minHeight?: number | string,\n  minWidth?: number | string,\n  dragAxis?: 'x' | 'y' | 'both' | 'none',\n  dragHandleClassName?: string,\n  disableDragging?: boolean,\n  cancel?: boolean,\n  enableUserSelectHack?: boolean,\n  _freeBottomBounds?: boolean, // Back door for react-elastic-grid.\n};\n\nconst resizableStyle = {\n  width: 'auto',\n  height: 'auto',\n  display: 'inline-block',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n};\n\nexport default class Rnd extends React.Component<Props, State> {\n  static defaultProps = {\n    maxWidth: Number.MAX_SAFE_INTEGER,\n    maxHeight: Number.MAX_SAFE_INTEGER,\n    onResizeStart: () => {},\n    onResize: () => {},\n    onResizeStop: () => {},\n    onDragStart: () => {},\n    onDrag: () => {},\n    onDragStop: () => {}\n  };\n  resizable: React$ElementRef<typeof Resizable> | null;\n  draggable: Draggable;\n  onResizeStart: ResizeStartCallback;\n  onResize: ResizeCallback;\n  onResizeStop: ResizeCallback;\n  onDragStart: RndDragCallback;\n  onDrag: RndDragCallback;\n  onDragStop: RndDragCallback;\n  getMaxSizesFromProps: () => {\n    maxWidth: number | string,\n    maxHeight: number | string,\n  };\n  wrapper: HTMLElement;\n  parentId: string;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = {\n      z: props.z,\n      original: {\n        x: 0,\n        y: 0,\n      },\n      bounds: {\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n      },\n      maxWidth: props.maxWidth,\n      maxHeight: props.maxHeight,\n      isMounted: false,\n    };\n    this.onResizeStart = this.onResizeStart.bind(this);\n    this.onResize = this.onResize.bind(this);\n    this.onResizeStop = this.onResizeStop.bind(this);\n    this.onDragStart = this.onDragStart.bind(this);\n    this.onDrag = this.onDrag.bind(this);\n    this.onDragStop = this.onDragStop.bind(this);\n    this.getMaxSizesFromProps = this.getMaxSizesFromProps.bind(this);\n  }\n\n  componentWillReceiveProps(nextProps: Props) {\n    if (this.props.z !== nextProps.z) {\n      this.setState({ z: nextProps.z });\n    }\n  }\n\n  componentDidMount() {\n    this.setParentPosition();\n  }\n\n  getParentSize(): { width: number, height: number } {\n    return (this.resizable: any).getParentSize();\n  }\n\n  getMaxSizesFromProps(): {\n    maxWidth: number | string,\n    maxHeight: number | string,\n    } {\n    const maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;\n    const maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;\n    return { maxWidth, maxHeight };\n  }\n\n  getSelfElement(): null | Element | Text {\n    if (!this) return null;\n    return findDOMNode(this);\n  }\n\n  setParentPosition() {\n    const element = this.getSelfElement();\n    if (element instanceof Element) {\n      const parent = element.parentNode;\n      if (!parent || typeof window === 'undefined') return;\n      if (!(parent instanceof HTMLElement)) return;\n      if (getComputedStyle(parent).position !== 'static') {\n        this.setState({ isMounted: true });\n        return;\n      }\n      parent.style.position = 'relative';\n      this.setState({ isMounted: true });\n    }\n  }\n\n  onDragStart(e: Event, data: DraggableData) {\n    if (this.props.onDragStart) {\n      this.props.onDragStart(e, data);\n    }\n    if (!this.props.bounds) return;\n    const parent = this.resizable && this.resizable.parentNode;\n    const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n    if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {\n      return;\n    }\n    const targetRect = target.getBoundingClientRect();\n    const targetLeft = targetRect.left;\n    const targetTop = targetRect.top;\n    const parentRect = parent.getBoundingClientRect();\n    const parentLeft = parentRect.left;\n    const parentTop = parentRect.top;\n    const left = targetLeft - parentLeft;\n    const top = targetTop - parentTop;\n    if (!this.resizable) return;\n    this.setState({\n      bounds: {\n        top,\n        right: left + (target.offsetWidth - this.resizable.size.width),\n        bottom: this.props._freeBottomBounds // eslint-disable-line\n          ? 2147483647\n          : top + (target.offsetHeight - this.resizable.size.height),\n        left,\n      },\n    });\n  }\n\n  onDrag(e: Event, data: DraggableData) {\n    if (this.props.onDrag) {\n      this.props.onDrag(e, data);\n    }\n  }\n\n  onDragStop(e: Event, data: DraggableData) {\n    if (this.props.onDragStop) {\n      this.props.onDragStop(e, data);\n    }\n  }\n\n  onResizeStart(\n    e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,\n    dir: ResizeDirection,\n    refToElement: React.ElementRef<'div'>,\n  ) {\n    e.stopPropagation();\n    this.setState({\n      original: { x: this.draggable.state.x, y: this.draggable.state.y },\n    });\n    if (this.props.bounds) {\n      const parent = this.resizable && this.resizable.parentNode;\n      const target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);\n      const self = this.getSelfElement();\n      if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {\n        let { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n        const parentSize = this.getParentSize();\n        if (maxWidth && typeof maxWidth === 'string') {\n          if (maxWidth.endsWith('%')) {\n            const ratio = Number(maxWidth.replace('%', '')) / 100;\n            maxWidth = parentSize.width * ratio;\n          } else if (maxWidth.endsWith('px')) {\n            maxWidth = Number(maxWidth.replace('px', ''));\n          }\n        }\n        if (maxHeight && typeof maxHeight === 'string') {\n          if (maxHeight.endsWith('%')) {\n            const ratio = Number(maxHeight.replace('%', '')) / 100;\n            maxHeight = parentSize.width * ratio;\n          } else if (maxHeight.endsWith('px')) {\n            maxHeight = Number(maxHeight.replace('px', ''));\n          }\n        }\n        const selfRect = self.getBoundingClientRect();\n        const selfLeft = selfRect.left;\n        const selfTop = selfRect.top;\n        const targetRect = target.getBoundingClientRect();\n        const targetLeft = targetRect.left;\n        const targetTop = targetRect.top;\n        if (/left/i.test(dir) && this.resizable) {\n          const max = selfLeft - targetLeft + this.resizable.size.width;\n          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n        }\n        if (/right/i.test(dir)) {\n          const max = target.offsetWidth + (targetLeft - selfLeft);\n          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });\n        }\n        if (/top/i.test(dir) && this.resizable) {\n          const max = selfTop - targetTop + this.resizable.size.height;\n          this.setState({\n            maxHeight: max > Number(maxHeight) ? maxHeight : max,\n          });\n        }\n        if (/bottom/i.test(dir)) {\n          const max = target.offsetHeight + (targetTop - selfTop);\n          this.setState({\n            maxHeight: max > Number(maxHeight) ? maxHeight : max,\n          });\n        }\n      }\n    } else {\n      this.setState({\n        maxWidth: this.props.maxWidth,\n        maxHeight: this.props.maxHeight,\n      });\n    }\n    if (this.props.onResizeStart) {\n      this.props.onResizeStart(e, dir, refToElement);\n    }\n  }\n\n  onResize(\n    e: MouseEvent | TouchEvent,\n    direction: ResizeDirection,\n    refToResizableElement: React.ElementRef<'div'>,\n    delta: { height: number, width: number },\n  ) {\n    let x;\n    let y;\n    if (/left/i.test(direction)) {\n      x = this.state.original.x - delta.width;\n      this.draggable.setState({ x });\n    }\n    if (/top/i.test(direction)) {\n      y = this.state.original.y - delta.height;\n      this.draggable.setState({ y });\n    }\n    if (this.props.onResize) {\n      this.props.onResize(e, direction, refToResizableElement, delta, {\n        x: x || this.draggable.state.x,\n        y: y || this.draggable.state.y,\n      });\n    }\n  }\n\n  onResizeStop(\n    e: MouseEvent | TouchEvent,\n    direction: ResizeDirection,\n    refToResizableElement: HTMLDivElement,\n    delta: { height: number, width: number },\n  ) {\n    const { maxWidth, maxHeight } = this.getMaxSizesFromProps();\n    this.setState({ maxWidth, maxHeight });\n    if (this.props.onResizeStop) {\n      const position: Position = {\n        x: this.draggable.state.x,\n        y: this.draggable.state.y,\n      };\n      this.props.onResizeStop(e, direction, refToResizableElement, delta, position);\n    }\n  }\n\n  updateSize(size: { width: number | string, height: number | string }) {\n    if (!this.resizable) return;\n    this.resizable.updateSize({ width: size.width, height: size.height });\n  }\n\n  updatePosition(position: Position) {\n    this.draggable.setState(position);\n  }\n\n  updateZIndex(z: number) {\n    this.setState({ z });\n  }\n\n  render(): React.Node {\n    const cursorStyle =\n      this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };\n    const innerStyle = {\n      ...resizableStyle,\n      zIndex: this.state.z,\n      ...cursorStyle,\n      ...this.props.style,\n    };\n    // HACK: Wait for setting relative to parent element, if props.absolutePos was not set ( SSR need initial render ). \n    if (!this.state.isMounted && !this.props.hasOwnProperty(\"absolutePos\")) return <div />;\n    const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line\n    return (\n      <Draggable\n        ref={(c: Draggable) => {\n          this.draggable = c;\n        }}\n        handle={this.props.dragHandleClassName}\n        defaultPosition={this.props.default}\n        onStart={this.onDragStart}\n        onDrag={this.onDrag}\n        onStop={this.onDragStop}\n        axis={this.props.dragAxis}\n        disabled={this.props.disableDragging}\n        grid={this.props.dragGrid}\n        bounds={this.props.bounds ? this.state.bounds : undefined}\n        position={this.props.position}\n        enableUserSelectHack={this.props.enableUserSelectHack}\n        cancel={this.props.cancel}\n      >\n        <Resizable\n          {...this.props.extendsProps}\n          className={this.props.className}\n          ref={(c: React$ElementRef<typeof Resizable> | null) => {\n            this.resizable = c;\n          }}\n          defaultSize={this.props.default}\n          size={this.props.size}\n          enable={this.props.enableResizing}\n          onResizeStart={this.onResizeStart}\n          onResize={this.onResize}\n          onResizeStop={this.onResizeStop}\n          style={innerStyle}\n          minWidth={this.props.minWidth}\n          minHeight={this.props.minHeight}\n          maxWidth={this.state.maxWidth}\n          maxHeight={maxHeight}\n          grid={this.props.resizeGrid}\n          handleWrapperClass={this.props.resizeHandleWrapperClass}\n          handleWrapperStyle={this.props.resizeHandleWrapperStyle}\n          lockAspectRatio={this.props.lockAspectRatio}\n          lockAspectRatioExtraWidth={this.props.lockAspectRatioExtraWidth}\n          lockAspectRatioExtraHeight={this.props.lockAspectRatioExtraHeight}\n          handleStyles={this.props.resizeHandleStyles}\n          handleClasses={this.props.resizeHandleClasses}\n        >\n          {this.props.children}\n        </Resizable>\n      </Draggable>\n    );\n  }\n}\n"],"names":["resizableStyle","width","height","display","position","top","left","Rnd","props","state","z","original","x","y","bounds","right","bottom","maxWidth","maxHeight","isMounted","onResizeStart","bind","onResize","onResizeStop","onDragStart","onDrag","onDragStop","getMaxSizesFromProps","nextProps","setState","setParentPosition","resizable","getParentSize","Number","MAX_SAFE_INTEGER","findDOMNode","element","getSelfElement","Element","parent","parentNode","window","HTMLElement","getComputedStyle","style","e","data","target","document","querySelector","targetRect","getBoundingClientRect","targetLeft","targetTop","parentRect","parentLeft","parentTop","offsetWidth","size","_freeBottomBounds","offsetHeight","dir","refToElement","stopPropagation","draggable","self","parentSize","endsWith","ratio","replace","selfRect","selfLeft","selfTop","test","max","direction","refToResizableElement","delta","updateSize","cursorStyle","disableDragging","dragHandleClassName","cursor","innerStyle","zIndex","hasOwnProperty","React.createElement","c","default","dragAxis","dragGrid","undefined","enableUserSelectHack","cancel","extendsProps","className","enableResizing","minWidth","minHeight","resizeGrid","resizeHandleWrapperClass","resizeHandleWrapperStyle","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","resizeHandleStyles","resizeHandleClasses","children","React","defaultProps"],"mappings":"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"}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1ed660ae..4ebf95d1 100755
--- a/src/index.js
+++ b/src/index.js
@@ -140,6 +140,7 @@ type Props = {
   cancel?: boolean,
   enableUserSelectHack?: boolean,
   _freeBottomBounds?: boolean, // Back door for react-elastic-grid.
+  absolutePos: boolean,  // allow initial absolute render for ssr
 };
 
 const resizableStyle = {
@@ -161,6 +162,7 @@ export default class Rnd extends React.Component<Props, State> {
     onDragStart: () => {},
     onDrag: () => {},
     onDragStop: () => {},
+    absolutePos: false,
   };
   resizable: React$ElementRef<typeof Resizable> | null;
   draggable: Draggable;
@@ -423,8 +425,9 @@ export default class Rnd extends React.Component<Props, State> {
       ...cursorStyle,
       ...this.props.style,
     };
-    // HACK: Wait for setting relative to parent element.
-    if (!this.state.isMounted) return <div />;
+    // HACK: Wait for setting relative to parent element
+    // skip if props.absolutePos == true ( SSR need initial render ).
+    if (!this.state.isMounted && !this.props.absolutePos) return <div />;
     const maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line
     return (
       <Draggable