Lots of changes

.babelrc

@@ -1,3 +1,6 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": [
+    "emotion"
+  ]
 }

lib/Region.js

@@ -14,8 +14,6 @@ var _objectAssign2 = _interopRequireDefault(_objectAssign);
 
 var _style = require('./style');
 
-var _style2 = _interopRequireDefault(_style);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -27,10 +25,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var Region = function (_Component) {
 	_inherits(Region, _Component);
 
-	function Region(props) {
+	function Region() {
 		_classCallCheck(this, Region);
 
-		return _possibleConstructorReturn(this, (Region.__proto__ || Object.getPrototypeOf(Region)).call(this, props));
+		return _possibleConstructorReturn(this, (Region.__proto__ || Object.getPrototypeOf(Region)).apply(this, arguments));
 	}
 
 	_createClass(Region, [{
@@ -39,30 +37,32 @@ var Region = function (_Component) {
 			return _react2.default.createElement(
 				'div',
 				null,
-				_react2.default.createElement('div', { 'data-dir': 'se', style: _style2.default.RegionHandleSE }),
-				_react2.default.createElement('div', { 'data-dir': 'sw', style: _style2.default.RegionHandleSW }),
-				_react2.default.createElement('div', { 'data-dir': 'nw', style: _style2.default.RegionHandleNW }),
-				_react2.default.createElement('div', { 'data-dir': 'ne', style: _style2.default.RegionHandleNE })
+				_react2.default.createElement('div', { 'data-dir': 'se', className: _style.regionHandleSE + ' region-handle-se' }),
+				_react2.default.createElement('div', { 'data-dir': 'sw', className: _style.regionHandleSW + ' region-handle-sw' }),
+				_react2.default.createElement('div', { 'data-dir': 'nw', className: _style.regionHandleNW + ' region-handle-nw' }),
+				_react2.default.createElement('div', { 'data-dir': 'ne', className: _style.regionHandleNE + ' region-handle-ne' })
 			);
 		}
 	}, {
 		key: 'render',
 		value: function render() {
 			var localStyle = {
-				width: this.props.width + '%',
-				height: this.props.height + '%',
-				left: this.props.x + '%',
-				top: this.props.y + '%'
+				width: this.props.width * this.props.zoom + 'px',
+				height: this.props.height * this.props.zoom + 'px',
+				left: this.props.x * this.props.zoom + 'px',
+				top: this.props.y * this.props.zoom + 'px'
 			};
 			var dataRenderArgs = {
 				data: this.props.data,
 				isChanging: this.props.changing,
 				index: this.props.index
 			};
+
 			return _react2.default.createElement(
 				'div',
 				{
-					style: (0, _objectAssign2.default)({}, _style2.default.Region, localStyle),
+					style: (0, _objectAssign2.default)({}, localStyle, this.props.customStyle, this.props.data.regionStyle),
+					className: _style.region + ' region',
 					onMouseDown: this.props.onCropStart,
 					onTouchStart: this.props.onCropStart,
 					'data-wrapper': 'wrapper'
@@ -86,7 +86,13 @@ Region.propTypes = {
 	handles: _propTypes.PropTypes.bool,
 	changing: _propTypes.PropTypes.bool,
 	dataRenderer: _propTypes.PropTypes.func,
-	data: _propTypes.PropTypes.object
+	data: _propTypes.PropTypes.object,
+	customStyle: _propTypes.PropTypes.object,
+	zoom: _propTypes.PropTypes.number
+};
+
+Region.defaultProps = {
+	zoom: 1
 };
 
 module.exports = Region;