cloudinary-react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

bower.json

@@ -10,3 +10,2 @@ {
   "homepage": "https://github.com/cloudinary/cloudinary-react",
-  "private": true,
   "ignore": [
@@ -13,0 +12,0 @@ "**/.*",

CHANGELOG.md

 
+1.0.2 / 2017-03-01
+==================
+
+  * Don't convert keys to snake_case in `normalizeOptions`. Fixes #6.
+  * Separate class definition and export statements. Updated documentation comments.
+  * Use traditional array traversing to solve react native issue on Android
+  * Force Travis-ci to use npm version >=3. Add test for Node 6.x
+
 1.0.1 / 2016-11-16
@@ -3,0 +11,0 @@ ==================

dist/cloudinary-react.js

@@ -72,3 +72,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	var _Image = __webpack_require__(5);
+	var _Image = __webpack_require__(12);
 
@@ -129,6 +129,6 @@ var _Image2 = _interopRequireDefault(_Image);
 	 * @example
-	 *    <CloudinaryContext cloudName="mycloud" dpr="auto">
-	 *      <!-- other tags -->
-	 *      <Image publicId={id}/>
-	 *    </CloudinaryContext>
+	 *<CloudinaryContext cloudName="mycloud" dpr="auto">
+	 *    <!-- other tags -->
+	 *    <Image publicId={id}/>
+	 *</CloudinaryContext>
 	 *
@@ -177,5 +177,2 @@ */
 
-	exports.default = CloudinaryContext;
-
-
 	CloudinaryContext.propTypes = _CloudinaryComponent3.default.propTypes;
@@ -185,2 +182,4 @@ CloudinaryContext.defaultProps = {};
 
+	exports.default = CloudinaryContext;
+
 /***/ },
@@ -206,2 +205,4 @@ /* 3 */
 
+	var _Util = __webpack_require__(5);
+
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -218,2 +219,7 @@
 
+	/**
+	 * A base component for Cloudinary components.
+	 * @protected
+	 */
+
 	var CloudinaryComponent = function (_Component) {
@@ -267,2 +273,3 @@ _inherits(CloudinaryComponent, _Component);
 	     * @returns {object} a hash of transformation and configuration parameters
+	     * @protected
 	     */
@@ -286,3 +293,4 @@
 	     * Combine properties of all options to create an option Object that can be passed to Cloudinary methods.<br>
-	     *   All names are converted to snake_case. undefined and null values are filtered out.
+	     *   `undefined` and `null` values are filtered out.
+	     * @protected
 	     * @returns {Object}
@@ -300,7 +308,8 @@ * @param options one or more options objects
 	     * @returns {string} a cloudinary URL
+	     * @protected
 	     */
 	    value: function getUrl(options) {
 	      var transformation = this.getTransformation(options);
-	      var cl = _cloudinaryCore.Cloudinary.new(options);
-	      return cl.url(options.public_id, transformation);
+	      var cl = _cloudinaryCore.Cloudinary.new(_cloudinaryCore.Util.withSnakeCaseKeys(options));
+	      return cl.url(options.publicId, transformation);
 	    }
@@ -318,3 +327,3 @@ }], [{
 	          if (value !== null && value !== undefined) {
-	            left[snakeCase(key)] = value;
+	            left[key] = value;
 	          }
@@ -330,4 +339,2 @@ }
 
-	exports.default = CloudinaryComponent;
-
 	CloudinaryComponent.VALID_OPTIONS = _cloudinaryCore.Transformation.PARAM_NAMES.map(camelCase);
@@ -346,2 +353,3 @@ CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
 	 * @returns {Object}
+	 * @private
 	 */
@@ -351,30 +359,11 @@ function typesFrom(configParams) {
 	  var types = {};
-	  var _iteratorNormalCompletion = true;
-	  var _didIteratorError = false;
-	  var _iteratorError = undefined;
-
-	  try {
-	    for (var _iterator = configParams[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-	      var key = _step.value;
-
-	      types[camelCase(key)] = _react.PropTypes.any;
-	    }
-	  } catch (err) {
-	    _didIteratorError = true;
-	    _iteratorError = err;
-	  } finally {
-	    try {
-	      if (!_iteratorNormalCompletion && _iterator.return) {
-	        _iterator.return();
-	      }
-	    } finally {
-	      if (_didIteratorError) {
-	        throw _iteratorError;
-	      }
-	    }
+	  for (var i = 0; i < configParams.length; i++) {
+	    var key = configParams[i];
+	    types[camelCase(key)] = _react.PropTypes.any;
 	  }
-
 	  return types;
 	}
 
+	exports.default = CloudinaryComponent;
+
 /***/ },
@@ -395,309 +384,5 @@ /* 4 */
 	});
-
-	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 _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 _react = __webpack_require__(1);
-
-	var _react2 = _interopRequireDefault(_react);
-
-	var _cloudinaryCore = __webpack_require__(4);
-
-	var _cloudinaryCore2 = _interopRequireDefault(_cloudinaryCore);
-
-	var _CloudinaryComponent2 = __webpack_require__(3);
-
-	var _CloudinaryComponent3 = _interopRequireDefault(_CloudinaryComponent2);
-
-	var _Util = __webpack_require__(6);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-	function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-	function _possibleConstructorReturn(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; }
-
-	function _inherits(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; }
-
-	/**
-	 * An element representing a Cloudinary served image
-	 */
-	var Image = function (_CloudinaryComponent) {
-	  _inherits(Image, _CloudinaryComponent);
-
-	  function Image(props, context) {
-	    _classCallCheck(this, Image);
-
-	    function defaultBreakpoints(width) {
-	      var steps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
-
-	      return steps * Math.ceil(width / steps);
-	    }
-
-	    var _this = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props, context));
-
-	    _this.handleResize = _this.handleResize.bind(_this);
-
-	    var state = { responsive: false, url: "", breakpoints: defaultBreakpoints };
-	    _this.state = Object.assign(state, _this.prepareState(props, context));
-	    return _this;
-	  }
-
-	  /**
-	   * Retrieve the window or default view of the current element
-	   * @returns {DocumentView|*}
-	   */
-
-
-	  _createClass(Image, [{
-	    key: 'shouldComponentUpdate',
-	    value: function shouldComponentUpdate(nextProps, nextState) {
-	      return !((0, _Util.equals)(this.props, nextProps) && (0, _Util.equals)(this.state, nextState));
-	    }
-	  }, {
-	    key: 'componentWillReceiveProps',
-	    value: function componentWillReceiveProps(nextProps, nextContext) {
-	      var state = this.prepareState(nextProps, nextContext);
-	      this.setState(state);
-	    }
-
-	    /**
-	     * Generate update state of this element
-	     * @param {Object} [props=this.props]
-	     * @param {Object} [context=this.context]
-	     * @returns {Object} state updates
-	     */
-
-	  }, {
-	    key: 'prepareState',
-	    value: function prepareState() {
-	      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-	      var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.context;
-
-	      var options = _CloudinaryComponent3.default.normalizeOptions(context, props);
-	      var url = this.getUrl(options);
-	      var state = {};
-	      if (options.breakpoints !== undefined) {
-	        state.breakpoints = options.breakpoints;
-	      }
-	      if (options.responsive) {
-	        state.responsive = true;
-	        url = this.cloudinary_update(url, state);
-	      }
-
-	      var currentState = this.state || {};
-	      if (!_cloudinaryCore.Util.isEmpty(url) && url !== currentState.url) {
-	        state.url = url;
-	      }
-	      return state;
-	    }
-	  }, {
-	    key: 'handleResize',
-	    value: function handleResize(e) {
-	      var _this2 = this;
-
-	      if (this.rqf) return;
-	      this.rqf = (0, _Util.requestAnimationFrame)(function () {
-	        _this2.rqf = null;
-	        var newState = _this2.prepareState();
-	        if (!_cloudinaryCore.Util.isEmpty(newState.url)) {
-	          _this2.setState(newState);
-	        }
-	      });
-	    }
-	  }, {
-	    key: 'componentDidMount',
-	    value: function componentDidMount() {
-	      // now that we have a this.element, we need to calculate the URL
-	      this.handleResize();
-	    }
-	  }, {
-	    key: 'componentWillUnmount',
-	    value: function componentWillUnmount() {
-	      this.element = undefined;
-	      if (this.listener) {
-	        this.listener.cancel();
-	        this.window && this.window.removeEventListener('resize', this.listener);
-	      }
-	      this.listener = undefined;
-	    }
-	  }, {
-	    key: 'componentWillUpdate',
-	    value: function componentWillUpdate(nextProps, nextState, nextContext) {
-	      if (nextState.responsive) {
-	        var wait = (0, _Util.firstDefined)(nextProps.responsiveDebounce, nextContext.responsiveDebounce, 100);
-	        if (this.listener) {
-	          this.window && this.window.removeEventListener('resize', this.listener);
-	        }
-	        this.listener = (0, _Util.debounce)(this.handleResize, wait);
-	        this.window && this.window.addEventListener('resize', this.listener);
-	      }
-	    }
-	  }, {
-	    key: 'render',
-	    value: function render() {
-	      var _this3 = this;
-
-	      var _CloudinaryComponent$ = _CloudinaryComponent3.default.normalizeOptions(this.props, this.context),
-	          public_id = _CloudinaryComponent$.public_id,
-	          responsive = _CloudinaryComponent$.responsive,
-	          responsive_debounce = _CloudinaryComponent$.responsive_debounce,
-	          children = _CloudinaryComponent$.children,
-	          options = _objectWithoutProperties(_CloudinaryComponent$, ['public_id', 'responsive', 'responsive_debounce', 'children']);
-
-	      var attributes = _cloudinaryCore2.default.Transformation.new(options).toHtmlAttributes();
-	      return _react2.default.createElement('img', _extends({}, attributes, { src: this.state.url, ref: function ref(e) {
-	          _this3.element = e;
-	        } }));
-	    }
-
-	    // Methods from cloudinary_js
-
-	  }, {
-	    key: 'findContainerWidth',
-	    value: function findContainerWidth() {
-	      var containerWidth, style;
-	      containerWidth = 0;
-	      var element = this.element;
-	      while ((0, _Util.isElement)(element = element != null ? element.parentNode : void 0) && !containerWidth) {
-	        style = this.window ? this.window.getComputedStyle(element) : '';
-	        if (!/^inline/.test(style.display)) {
-	          containerWidth = _cloudinaryCore.Util.width(element);
-	        }
-	      }
-	      return containerWidth;
-	    }
-	  }, {
-	    key: 'applyBreakpoints',
-	    value: function applyBreakpoints(width, steps, options) {
-	      var responsive_use_breakpoints;
-	      options = _CloudinaryComponent3.default.normalizeOptions(this.context, this.props, options);
-	      responsive_use_breakpoints = options.responsiveUseBreakpoints;
-	      if (!responsive_use_breakpoints || responsive_use_breakpoints === 'resize' && !options.resizing) {
-	        return width;
-	      } else {
-	        return this.calc_breakpoint(width, steps);
-	      }
-	    }
-	  }, {
-	    key: 'calc_breakpoint',
-	    value: function calc_breakpoint(width, steps) {
-	      var breakpoints, point;
-	      breakpoints = this.state.breakpoints || defaultBreakpoints;
-	      if (_cloudinaryCore.Util.isFunction(breakpoints)) {
-	        return breakpoints(width, steps);
-	      } else {
-	        if (_cloudinaryCore.Util.isString(breakpoints)) {
-	          breakpoints = function () {
-	            var j, len, ref, results;
-	            ref = breakpoints.split(',');
-	            results = [];
-	            for (j = 0, len = ref.length; j < len; j++) {
-	              point = ref[j];
-	              results.push(parseInt(point));
-	            }
-	            return results;
-	          }().sort(function (a, b) {
-	            return a - b;
-	          });
-	        }
-	        return (0, _Util.closestAbove)(breakpoints, width);
-	      }
-	    }
-	  }, {
-	    key: 'device_pixel_ratio',
-	    value: function device_pixel_ratio() {
-	      var roundDpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-
-	      var dpr, dprString;
-	      dpr = (typeof this.window !== "undefined" && this.window !== null ? this.window.devicePixelRatio : void 0) || 1;
-	      if (roundDpr) {
-	        dpr = Math.ceil(dpr);
-	      }
-	      if (dpr <= 0 || isNaN(dpr)) {
-	        dpr = 1;
-	      }
-	      dprString = dpr.toString();
-	      if (dprString.match(/^\d+$/)) {
-	        dprString += '.0';
-	      }
-	      return dprString;
-	    }
-	  }, {
-	    key: 'updateDpr',
-	    value: function updateDpr(dataSrc, roundDpr) {
-	      return dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr));
-	    }
-	  }, {
-	    key: 'maxWidth',
-	    value: function maxWidth(requiredWidth) {
-	      var imageWidth;
-	      imageWidth = this.state.width || 0;
-	      if (requiredWidth > imageWidth) {
-	        imageWidth = requiredWidth;
-	        this.setState({ width: requiredWidth });
-	      }
-	      return imageWidth;
-	    }
-	  }, {
-	    key: 'cloudinary_update',
-	    value: function cloudinary_update(url) {
-	      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-	      var requiredWidth;
-	      var match;
-	      var resultUrl = this.updateDpr(url, options.roundDpr);
-	      if (options.responsive || this.state && this.state.responsive) {
-	        var containerWidth = this.findContainerWidth();
-	        if (containerWidth !== 0) {
-	          if (/w_auto:breakpoints/.test(resultUrl)) {
-	            requiredWidth = this.maxWidth(containerWidth, this.element);
-	            resultUrl = resultUrl.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:" + requiredWidth);
-	          } else if (match = /w_auto(:(\d+))?/.exec(resultUrl)) {
-	            requiredWidth = this.applyBreakpoints(containerWidth, match[2], options);
-	            requiredWidth = this.maxWidth(requiredWidth, this.element);
-	            resultUrl = resultUrl.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
-	          }
-	        } else {
-	          resultUrl = "";
-	        }
-	      }
-	      return resultUrl;
-	    }
-	  }, {
-	    key: 'window',
-	    get: function get() {
-	      var windowRef = null;
-	      if (typeof window !== "undefined") {
-	        windowRef = window;
-	      }
-	      return this.element && this.element.ownerDocument ? this.element.ownerDocument.defaultView || windowRef : windowRef;
-	    }
-	  }]);
-
-	  return Image;
-	}(_CloudinaryComponent3.default);
-
-	exports.default = Image;
-
-
-	Image.defaultProps = {};
-	Image.contextTypes = _CloudinaryComponent3.default.contextTypes;
-	Image.propTypes = _CloudinaryComponent3.default.propTypes;
-
-/***/ },
-/* 6 */
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
 	exports.isElement = exports.equals = exports.cancelAnimationFrame = exports.requestAnimationFrame = exports.closestAbove = exports.firstDefined = exports.debounce = undefined;
 
-	var _requestAnimationFrame = __webpack_require__(7);
+	var _requestAnimationFrame = __webpack_require__(6);
 
@@ -717,19 +402,19 @@ Object.defineProperty(exports, 'requestAnimationFrame', {
 
-	var _debounce2 = __webpack_require__(8);
+	var _debounce2 = __webpack_require__(7);
 
 	var _debounce3 = _interopRequireDefault(_debounce2);
 
-	var _firstDefined2 = __webpack_require__(9);
+	var _firstDefined2 = __webpack_require__(8);
 
 	var _firstDefined3 = _interopRequireDefault(_firstDefined2);
 
-	var _closestAbove2 = __webpack_require__(10);
+	var _closestAbove2 = __webpack_require__(9);
 
 	var _closestAbove3 = _interopRequireDefault(_closestAbove2);
 
-	var _equals2 = __webpack_require__(11);
+	var _equals2 = __webpack_require__(10);
 
 	var _equals3 = _interopRequireDefault(_equals2);
 
-	var _isElement2 = __webpack_require__(12);
+	var _isElement2 = __webpack_require__(11);
 
@@ -747,3 +432,3 @@ var _isElement3 = _interopRequireDefault(_isElement2);
 /***/ },
-/* 7 */
+/* 6 */
 /***/ function(module, exports) {
@@ -794,3 +479,3 @@
 /***/ },
-/* 8 */
+/* 7 */
 /***/ function(module, exports) {
@@ -810,2 +495,3 @@
 	 * @returns {function()} debounced function
+	 * @protected
 	 */
@@ -845,3 +531,3 @@ function debounce(func, wait, immediate) {
 /***/ },
-/* 9 */
+/* 8 */
 /***/ function(module, exports) {
@@ -859,2 +545,3 @@
 	 * @returns {*}
+	 * @protected
 	 */
@@ -866,27 +553,5 @@ function firstDefined() {
 
-	  var _iteratorNormalCompletion = true;
-	  var _didIteratorError = false;
-	  var _iteratorError = undefined;
-
-	  try {
-	    for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-	      var value = _step.value;
-
-	      if (value !== undefined) return value;
-	    }
-	  } catch (err) {
-	    _didIteratorError = true;
-	    _iteratorError = err;
-	  } finally {
-	    try {
-	      if (!_iteratorNormalCompletion && _iterator.return) {
-	        _iterator.return();
-	      }
-	    } finally {
-	      if (_didIteratorError) {
-	        throw _iteratorError;
-	      }
-	    }
+	  for (var i = 0; i < values.length; i++) {
+	    if (values[i] !== undefined) return values[i];
 	  }
-
 	  return undefined;
@@ -896,3 +561,3 @@ }
 /***/ },
-/* 10 */
+/* 9 */
 /***/ function(module, exports) {
@@ -911,2 +576,3 @@
 	 * @returns {*}
+	 * @protected
 	 */
@@ -920,3 +586,3 @@ function closestAbove(list, value) {
 /***/ },
-/* 11 */
+/* 10 */
 /***/ function(module, exports) {
@@ -1126,3 +792,3 @@
 /***/ },
-/* 12 */
+/* 11 */
 /***/ function(module, exports) {
@@ -1149,2 +815,3 @@
 	 * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.
+	 * @protected
 	 * @example
@@ -1167,2 +834,307 @@ *
 /***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	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 _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 _react = __webpack_require__(1);
+
+	var _react2 = _interopRequireDefault(_react);
+
+	var _cloudinaryCore = __webpack_require__(4);
+
+	var _cloudinaryCore2 = _interopRequireDefault(_cloudinaryCore);
+
+	var _CloudinaryComponent2 = __webpack_require__(3);
+
+	var _CloudinaryComponent3 = _interopRequireDefault(_CloudinaryComponent2);
+
+	var _Util = __webpack_require__(5);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(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; }
+
+	function _inherits(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; }
+
+	/**
+	 * A component representing a Cloudinary served image
+	 */
+	var Image = function (_CloudinaryComponent) {
+	  _inherits(Image, _CloudinaryComponent);
+
+	  function Image(props, context) {
+	    _classCallCheck(this, Image);
+
+	    function defaultBreakpoints(width) {
+	      var steps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+
+	      return steps * Math.ceil(width / steps);
+	    }
+
+	    var _this = _possibleConstructorReturn(this, (Image.__proto__ || Object.getPrototypeOf(Image)).call(this, props, context));
+
+	    _this.handleResize = _this.handleResize.bind(_this);
+
+	    var state = { responsive: false, url: "", breakpoints: defaultBreakpoints };
+	    _this.state = Object.assign(state, _this.prepareState(props, context));
+	    return _this;
+	  }
+
+	  /**
+	   * Retrieve the window or default view of the current element
+	   * @returns {DocumentView|*}
+	   * @private
+	   */
+
+
+	  _createClass(Image, [{
+	    key: 'shouldComponentUpdate',
+	    value: function shouldComponentUpdate(nextProps, nextState) {
+	      return !((0, _Util.equals)(this.props, nextProps) && (0, _Util.equals)(this.state, nextState));
+	    }
+	  }, {
+	    key: 'componentWillReceiveProps',
+	    value: function componentWillReceiveProps(nextProps, nextContext) {
+	      var state = this.prepareState(nextProps, nextContext);
+	      this.setState(state);
+	    }
+
+	    /**
+	     * Generate update state of this element
+	     * @param {Object} [props=this.props]
+	     * @param {Object} [context=this.context]
+	     * @returns {Object} state updates
+	     * @private
+	     */
+
+	  }, {
+	    key: 'prepareState',
+	    value: function prepareState() {
+	      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+	      var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.context;
+
+	      var options = _CloudinaryComponent3.default.normalizeOptions(context, props);
+	      var url = this.getUrl(options);
+	      var state = {};
+	      if (options.breakpoints !== undefined) {
+	        state.breakpoints = options.breakpoints;
+	      }
+	      if (options.responsive) {
+	        state.responsive = true;
+	        url = this.cloudinary_update(url, state);
+	      }
+
+	      var currentState = this.state || {};
+	      if (!_cloudinaryCore.Util.isEmpty(url) && url !== currentState.url) {
+	        state.url = url;
+	      }
+	      return state;
+	    }
+	  }, {
+	    key: 'handleResize',
+	    value: function handleResize(e) {
+	      var _this2 = this;
+
+	      if (this.rqf) return;
+	      this.rqf = (0, _Util.requestAnimationFrame)(function () {
+	        _this2.rqf = null;
+	        var newState = _this2.prepareState();
+	        if (!_cloudinaryCore.Util.isEmpty(newState.url)) {
+	          _this2.setState(newState);
+	        }
+	      });
+	    }
+	  }, {
+	    key: 'componentDidMount',
+	    value: function componentDidMount() {
+	      // now that we have a this.element, we need to calculate the URL
+	      this.handleResize();
+	    }
+	  }, {
+	    key: 'componentWillUnmount',
+	    value: function componentWillUnmount() {
+	      this.element = undefined;
+	      if (this.listener) {
+	        this.listener.cancel();
+	        this.window && this.window.removeEventListener('resize', this.listener);
+	      }
+	      this.listener = undefined;
+	    }
+	  }, {
+	    key: 'componentWillUpdate',
+	    value: function componentWillUpdate(nextProps, nextState, nextContext) {
+	      if (nextState.responsive) {
+	        var wait = (0, _Util.firstDefined)(nextProps.responsiveDebounce, nextContext.responsiveDebounce, 100);
+	        if (this.listener) {
+	          this.window && this.window.removeEventListener('resize', this.listener);
+	        }
+	        this.listener = (0, _Util.debounce)(this.handleResize, wait);
+	        this.window && this.window.addEventListener('resize', this.listener);
+	      }
+	    }
+	  }, {
+	    key: 'render',
+	    value: function render() {
+	      var _this3 = this;
+
+	      var _CloudinaryComponent$ = _CloudinaryComponent3.default.normalizeOptions(this.props, this.context),
+	          publicId = _CloudinaryComponent$.publicId,
+	          responsive = _CloudinaryComponent$.responsive,
+	          responsiveDebounce = _CloudinaryComponent$.responsiveDebounce,
+	          children = _CloudinaryComponent$.children,
+	          options = _objectWithoutProperties(_CloudinaryComponent$, ['publicId', 'responsive', 'responsiveDebounce', 'children']);
+
+	      var attributes = _cloudinaryCore2.default.Transformation.new(options).toHtmlAttributes();
+	      return _react2.default.createElement('img', _extends({}, attributes, { src: this.state.url, ref: function ref(e) {
+	          _this3.element = e;
+	        } }));
+	    }
+
+	    // Methods from cloudinary_js
+
+	  }, {
+	    key: 'findContainerWidth',
+	    value: function findContainerWidth() {
+	      var containerWidth, style;
+	      containerWidth = 0;
+	      var element = this.element;
+	      while ((0, _Util.isElement)(element = element != null ? element.parentNode : void 0) && !containerWidth) {
+	        style = this.window ? this.window.getComputedStyle(element) : '';
+	        if (!/^inline/.test(style.display)) {
+	          containerWidth = _cloudinaryCore.Util.width(element);
+	        }
+	      }
+	      return containerWidth;
+	    }
+	  }, {
+	    key: 'applyBreakpoints',
+	    value: function applyBreakpoints(width, steps, options) {
+	      var responsive_use_breakpoints;
+	      options = _CloudinaryComponent3.default.normalizeOptions(this.context, this.props, options);
+	      responsive_use_breakpoints = options.responsiveUseBreakpoints;
+	      if (!responsive_use_breakpoints || responsive_use_breakpoints === 'resize' && !options.resizing) {
+	        return width;
+	      } else {
+	        return this.calc_breakpoint(width, steps);
+	      }
+	    }
+	  }, {
+	    key: 'calc_breakpoint',
+	    value: function calc_breakpoint(width, steps) {
+	      var breakpoints, point;
+	      breakpoints = this.state.breakpoints || defaultBreakpoints;
+	      if (_cloudinaryCore.Util.isFunction(breakpoints)) {
+	        return breakpoints(width, steps);
+	      } else {
+	        if (_cloudinaryCore.Util.isString(breakpoints)) {
+	          breakpoints = function () {
+	            var j, len, ref, results;
+	            ref = breakpoints.split(',');
+	            results = [];
+	            for (j = 0, len = ref.length; j < len; j++) {
+	              point = ref[j];
+	              results.push(parseInt(point));
+	            }
+	            return results;
+	          }().sort(function (a, b) {
+	            return a - b;
+	          });
+	        }
+	        return (0, _Util.closestAbove)(breakpoints, width);
+	      }
+	    }
+	  }, {
+	    key: 'device_pixel_ratio',
+	    value: function device_pixel_ratio() {
+	      var roundDpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+	      var dpr, dprString;
+	      dpr = (typeof this.window !== "undefined" && this.window !== null ? this.window.devicePixelRatio : void 0) || 1;
+	      if (roundDpr) {
+	        dpr = Math.ceil(dpr);
+	      }
+	      if (dpr <= 0 || isNaN(dpr)) {
+	        dpr = 1;
+	      }
+	      dprString = dpr.toString();
+	      if (dprString.match(/^\d+$/)) {
+	        dprString += '.0';
+	      }
+	      return dprString;
+	    }
+	  }, {
+	    key: 'updateDpr',
+	    value: function updateDpr(dataSrc, roundDpr) {
+	      return dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr));
+	    }
+	  }, {
+	    key: 'maxWidth',
+	    value: function maxWidth(requiredWidth) {
+	      var imageWidth;
+	      imageWidth = this.state.width || 0;
+	      if (requiredWidth > imageWidth) {
+	        imageWidth = requiredWidth;
+	        this.setState({ width: requiredWidth });
+	      }
+	      return imageWidth;
+	    }
+	  }, {
+	    key: 'cloudinary_update',
+	    value: function cloudinary_update(url) {
+	      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+	      var requiredWidth;
+	      var match;
+	      var resultUrl = this.updateDpr(url, options.roundDpr);
+	      if (options.responsive || this.state && this.state.responsive) {
+	        var containerWidth = this.findContainerWidth();
+	        if (containerWidth !== 0) {
+	          if (/w_auto:breakpoints/.test(resultUrl)) {
+	            requiredWidth = this.maxWidth(containerWidth, this.element);
+	            resultUrl = resultUrl.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:" + requiredWidth);
+	          } else if (match = /w_auto(:(\d+))?/.exec(resultUrl)) {
+	            requiredWidth = this.applyBreakpoints(containerWidth, match[2], options);
+	            requiredWidth = this.maxWidth(requiredWidth, this.element);
+	            resultUrl = resultUrl.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
+	          }
+	        } else {
+	          resultUrl = "";
+	        }
+	      }
+	      return resultUrl;
+	    }
+	  }, {
+	    key: 'window',
+	    get: function get() {
+	      var windowRef = null;
+	      if (typeof window !== "undefined") {
+	        windowRef = window;
+	      }
+	      return this.element && this.element.ownerDocument ? this.element.ownerDocument.defaultView || windowRef : windowRef;
+	    }
+	  }]);
+
+	  return Image;
+	}(_CloudinaryComponent3.default);
+
+	Image.defaultProps = {};
+	Image.contextTypes = _CloudinaryComponent3.default.contextTypes;
+	Image.propTypes = _CloudinaryComponent3.default.propTypes;
+
+	exports.default = Image;
+
+/***/ },
 /* 13 */
@@ -1195,2 +1167,5 @@ /***/ function(module, exports, __webpack_require__) {
 
+	/**
+	 * Define a transformation that is applied to the parent tag.
+	 */
 	var Transformation = function (_CloudinaryComponent) {
@@ -1215,4 +1190,2 @@ _inherits(Transformation, _CloudinaryComponent);
 
-	exports.default = Transformation;
-
 	Transformation.propTypes = _CloudinaryComponent3.default.propTypes;
@@ -1222,2 +1195,4 @@ Transformation.defaultProps = {};
 
+	exports.default = Transformation;
+
 /***/ },
@@ -1260,2 +1235,6 @@ /* 14 */
 
+	/**
+	 * A component representing a Cloudinary served video
+	 */
+
 	var Video = function (_CloudinaryComponent) {
@@ -1287,3 +1266,3 @@ _inherits(Video, _CloudinaryComponent);
 	      options = _CloudinaryComponent3.default.normalizeOptions(options, {});
-	      var cld = _cloudinaryCore.Cloudinary.new(options);
+	      var cld = _cloudinaryCore.Cloudinary.new(_cloudinaryCore.Util.withSnakeCaseKeys(options));
 	      var sources = [];
@@ -1293,3 +1272,3 @@ var tagAttributes = _cloudinaryCore.Transformation.new(options).toHtmlAttributes();
 	        var defaults = poster.publicId !== undefined && poster.publicId !== null ? _cloudinaryCore.Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
-	        poster = cld.url(poster.publicId || publicId, _cloudinaryCore.Util.defaults({}, poster, defaults));
+	        poster = cld.url(poster.publicId || publicId, _cloudinaryCore.Util.defaults({}, _cloudinaryCore.Util.withSnakeCaseKeys(poster), defaults));
 	      }
@@ -1326,4 +1305,2 @@ if (!_cloudinaryCore.Util.isEmpty(poster)) {
 
-	exports.default = Video;
-
 	Video.propTypes = { publicId: _react.PropTypes.string };
@@ -1333,2 +1310,4 @@ Video.defaultProps = {};
 
+	exports.default = Video;
+
 /***/ }
@@ -1335,0 +1314,0 @@ /******/ ])

lib/components/CloudinaryComponent/CloudinaryComponent.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _Util = require('../../Util');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,2 +31,7 @@
 
+/**
+ * A base component for Cloudinary components.
+ * @protected
+ */
+
 var CloudinaryComponent = function (_Component) {
@@ -78,2 +85,3 @@ _inherits(CloudinaryComponent, _Component);
      * @returns {object} a hash of transformation and configuration parameters
+     * @protected
      */
@@ -97,3 +105,4 @@
      * Combine properties of all options to create an option Object that can be passed to Cloudinary methods.<br>
-     *   All names are converted to snake_case. undefined and null values are filtered out.
+     *   `undefined` and `null` values are filtered out.
+     * @protected
      * @returns {Object}
@@ -111,7 +120,8 @@ * @param options one or more options objects
      * @returns {string} a cloudinary URL
+     * @protected
      */
     value: function getUrl(options) {
       var transformation = this.getTransformation(options);
-      var cl = _cloudinaryCore.Cloudinary.new(options);
-      return cl.url(options.public_id, transformation);
+      var cl = _cloudinaryCore.Cloudinary.new(_cloudinaryCore.Util.withSnakeCaseKeys(options));
+      return cl.url(options.publicId, transformation);
     }
@@ -129,3 +139,3 @@ }], [{
           if (value !== null && value !== undefined) {
-            left[snakeCase(key)] = value;
+            left[key] = value;
           }
@@ -141,4 +151,2 @@ }
 
-exports.default = CloudinaryComponent;
-
 CloudinaryComponent.VALID_OPTIONS = _cloudinaryCore.Transformation.PARAM_NAMES.map(camelCase);
@@ -157,2 +165,3 @@ CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
  * @returns {Object}
+ * @private
  */
@@ -162,28 +171,9 @@ function typesFrom(configParams) {
   var types = {};
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
-
-  try {
-    for (var _iterator = configParams[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var key = _step.value;
-
-      types[camelCase(key)] = _react.PropTypes.any;
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
+  for (var i = 0; i < configParams.length; i++) {
+    var key = configParams[i];
+    types[camelCase(key)] = _react.PropTypes.any;
   }
+  return types;
+}
 
-  return types;
-}
+exports.default = CloudinaryComponent;

lib/components/CloudinaryContext/CloudinaryContext.js

@@ -28,6 +28,6 @@ 'use strict';
  * @example
- *    <CloudinaryContext cloudName="mycloud" dpr="auto">
- *      <!-- other tags -->
- *      <Image publicId={id}/>
- *    </CloudinaryContext>
+ *<CloudinaryContext cloudName="mycloud" dpr="auto">
+ *    <!-- other tags -->
+ *    <Image publicId={id}/>
+ *</CloudinaryContext>
  *
@@ -76,7 +76,6 @@ */
 
-exports.default = CloudinaryContext;
-
-
 CloudinaryContext.propTypes = _CloudinaryComponent3.default.propTypes;
 CloudinaryContext.defaultProps = {};
-CloudinaryContext.childContextTypes = _CloudinaryComponent3.default.contextTypes;
+CloudinaryContext.childContextTypes = _CloudinaryComponent3.default.contextTypes;
+
+exports.default = CloudinaryContext;

lib/components/Image/Image.js

@@ -36,3 +36,3 @@ 'use strict';
 /**
- * An element representing a Cloudinary served image
+ * A component representing a Cloudinary served image
  */
@@ -63,2 +63,3 @@ var Image = function (_CloudinaryComponent) {
    * @returns {DocumentView|*}
+   * @private
    */
@@ -84,2 +85,3 @@
      * @returns {Object} state updates
+     * @private
      */
@@ -158,7 +160,7 @@
       var _CloudinaryComponent$ = _CloudinaryComponent3.default.normalizeOptions(this.props, this.context),
-          public_id = _CloudinaryComponent$.public_id,
+          publicId = _CloudinaryComponent$.publicId,
           responsive = _CloudinaryComponent$.responsive,
-          responsive_debounce = _CloudinaryComponent$.responsive_debounce,
+          responsiveDebounce = _CloudinaryComponent$.responsiveDebounce,
           children = _CloudinaryComponent$.children,
-          options = _objectWithoutProperties(_CloudinaryComponent$, ['public_id', 'responsive', 'responsive_debounce', 'children']);
+          options = _objectWithoutProperties(_CloudinaryComponent$, ['publicId', 'responsive', 'responsiveDebounce', 'children']);
 
@@ -298,7 +300,6 @@ var attributes = _cloudinaryCore2.default.Transformation.new(options).toHtmlAttributes();
 
-exports.default = Image;
-
-
 Image.defaultProps = {};
 Image.contextTypes = _CloudinaryComponent3.default.contextTypes;
-Image.propTypes = _CloudinaryComponent3.default.propTypes;
+Image.propTypes = _CloudinaryComponent3.default.propTypes;
+
+exports.default = Image;

lib/components/Transformation/Transformation.js

@@ -25,2 +25,5 @@ 'use strict';
 
+/**
+ * Define a transformation that is applied to the parent tag.
+ */
 var Transformation = function (_CloudinaryComponent) {
@@ -45,6 +48,6 @@ _inherits(Transformation, _CloudinaryComponent);
 
-exports.default = Transformation;
-
 Transformation.propTypes = _CloudinaryComponent3.default.propTypes;
 Transformation.defaultProps = {};
-Transformation.contextTypes = {};
+Transformation.contextTypes = {};
+
+exports.default = Transformation;

lib/components/Video/Video.js

@@ -34,2 +34,6 @@ 'use strict';
 
+/**
+ * A component representing a Cloudinary served video
+ */
+
 var Video = function (_CloudinaryComponent) {
@@ -61,3 +65,3 @@ _inherits(Video, _CloudinaryComponent);
       options = _CloudinaryComponent3.default.normalizeOptions(options, {});
-      var cld = _cloudinaryCore.Cloudinary.new(options);
+      var cld = _cloudinaryCore.Cloudinary.new(_cloudinaryCore.Util.withSnakeCaseKeys(options));
       var sources = [];
@@ -67,3 +71,3 @@ var tagAttributes = _cloudinaryCore.Transformation.new(options).toHtmlAttributes();
         var defaults = poster.publicId !== undefined && poster.publicId !== null ? _cloudinaryCore.Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
-        poster = cld.url(poster.publicId || publicId, _cloudinaryCore.Util.defaults({}, poster, defaults));
+        poster = cld.url(poster.publicId || publicId, _cloudinaryCore.Util.defaults({}, _cloudinaryCore.Util.withSnakeCaseKeys(poster), defaults));
       }
@@ -100,6 +104,6 @@ if (!_cloudinaryCore.Util.isEmpty(poster)) {
 
-exports.default = Video;
-
 Video.propTypes = { publicId: _react.PropTypes.string };
 Video.defaultProps = {};
-Video.contextTypes = _CloudinaryComponent3.default.contextTypes;
+Video.contextTypes = _CloudinaryComponent3.default.contextTypes;
+
+exports.default = Video;

lib/Util/closestAbove.js

@@ -12,2 +12,3 @@ "use strict";
  * @returns {*}
+ * @protected
  */
@@ -14,0 +15,0 @@ function closestAbove(list, value) {

lib/Util/debounce.js

@@ -13,2 +13,3 @@ "use strict";
  * @returns {function()} debounced function
+ * @protected
  */
@@ -15,0 +16,0 @@ function debounce(func, wait, immediate) {

lib/Util/firstDefined.js

@@ -11,2 +11,3 @@ "use strict";
  * @returns {*}
+ * @protected
  */
@@ -18,28 +19,6 @@ function firstDefined() {
 
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
-
-  try {
-    for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var value = _step.value;
-
-      if (value !== undefined) return value;
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
+  for (var i = 0; i < values.length; i++) {
+    if (values[i] !== undefined) return values[i];
   }
-
   return undefined;
 }

lib/Util/isElement.js

@@ -20,2 +20,3 @@ 'use strict';
  * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.
+ * @protected
  * @example
@@ -22,0 +23,0 @@ *

package.json

 {
   "name": "cloudinary-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Present Cloudinary images and videos using React components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -24,4 +24,6 @@
 1. Include the javascript files in your code. For Example:
-
+   
+   ```js
    import {Image} from 'cloudinary-react';
+   ```
 
@@ -34,3 +36,3 @@
 
-```
+```js
 ReactDOM.render(
@@ -37,0 +39,0 @@ <div>

src/components/CloudinaryComponent/CloudinaryComponent.js

 import React, {Component, PropTypes} from 'react';
 import {Cloudinary, Configuration, Transformation, Util} from 'cloudinary-core';
+import {mapKeys} from '../../Util'
 
@@ -7,3 +8,7 @@ const camelCase = Util.camelCase;
 
-export default class CloudinaryComponent extends Component {
+/**
+ * A base component for Cloudinary components.
+ * @protected
+ */
+class CloudinaryComponent extends Component {
   constructor(props, context) {
@@ -44,2 +49,3 @@ super(props, context);
    * @returns {object} a hash of transformation and configuration parameters
+   * @protected
    */
@@ -60,3 +66,4 @@ getTransformation(options) {
    * Combine properties of all options to create an option Object that can be passed to Cloudinary methods.<br>
-   *   All names are converted to snake_case. undefined and null values are filtered out.
+   *   `undefined` and `null` values are filtered out.
+   * @protected
    * @returns {Object}
@@ -70,3 +77,3 @@ * @param options one or more options objects
           if (value !== null && value !== undefined) {
-            left[snakeCase(key)] = value;
+            left[key] = value;
           }
@@ -83,7 +90,8 @@ }
    * @returns {string} a cloudinary URL
+   * @protected
    */
   getUrl(options) {
     let transformation = this.getTransformation(options);
-    let cl = Cloudinary.new(options);
-    return cl.url(options.public_id, transformation);
+    let cl = Cloudinary.new(Util.withSnakeCaseKeys(options));
+    return cl.url(options.publicId, transformation);
   }
@@ -105,2 +113,3 @@
  * @returns {Object}
+ * @private
  */
@@ -110,3 +119,4 @@ function typesFrom(configParams) {
   const types = {};
-  for (let key of configParams) {
+  for (let i =0; i < configParams.length; i++) {
+    const key = configParams[i];
     types[camelCase(key)] = PropTypes.any;
@@ -117,1 +127,2 @@ }
 
+export default CloudinaryComponent;

src/components/CloudinaryContext/CloudinaryContext.js

@@ -7,9 +7,9 @@ import React from 'react';
  * @example
- *    <CloudinaryContext cloudName="mycloud" dpr="auto">
- *      <!-- other tags -->
- *      <Image publicId={id}/>
- *    </CloudinaryContext>
+ *<CloudinaryContext cloudName="mycloud" dpr="auto">
+ *    <!-- other tags -->
+ *    <Image publicId={id}/>
+ *</CloudinaryContext>
  *
  */
-export default class CloudinaryContext extends CloudinaryComponent {
+class CloudinaryContext extends CloudinaryComponent {
   constructor(props, context) {
@@ -41,2 +41,4 @@ super(props, context);
 CloudinaryContext.defaultProps = {};
-CloudinaryContext.childContextTypes = CloudinaryComponent.contextTypes;
+CloudinaryContext.childContextTypes = CloudinaryComponent.contextTypes;
+
+export default CloudinaryContext;

src/components/Image/Image.js

@@ -7,5 +7,5 @@ import React, {Component, PropTypes} from 'react';
 /**
- * An element representing a Cloudinary served image
+ * A component representing a Cloudinary served image
  */
-export default class Image extends CloudinaryComponent {
+class Image extends CloudinaryComponent {
   constructor(props, context) {
@@ -26,2 +26,3 @@ function defaultBreakpoints(width, steps = 100) {
    * @returns {DocumentView|*}
+   * @private
    */
@@ -50,2 +51,3 @@ get window() {
    * @returns {Object} state updates
+   * @private
    */
@@ -108,3 +110,3 @@ prepareState(props = this.props, context = this.context) {
   render() {
-    var {public_id, responsive, responsive_debounce, children, ...options} = CloudinaryComponent.normalizeOptions(this.props,
+    var {publicId, responsive, responsiveDebounce, children, ...options} = CloudinaryComponent.normalizeOptions(this.props,
       this.context);
@@ -135,3 +137,3 @@ var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     options = CloudinaryComponent.normalizeOptions(this.context, this.props, options);
-    responsive_use_breakpoints = options.responsiveUseBreakpoints;
+    responsive_use_breakpoints = options.responsive_use_breakpoints;
     if ((!responsive_use_breakpoints) || (responsive_use_breakpoints === 'resize' && !options.resizing)) {
@@ -225,1 +227,3 @@ return width;
 Image.propTypes = CloudinaryComponent.propTypes;
+
+export default Image;

src/components/Transformation/Transformation.js

 import React, {Component} from 'react';
 import CloudinaryComponent from '../CloudinaryComponent';
 
-export default class Transformation extends CloudinaryComponent {
+/**
+ * Define a transformation that is applied to the parent tag.
+ */
+class Transformation extends CloudinaryComponent {
   constructor(props) {
@@ -15,2 +18,4 @@ super(props);
 Transformation.defaultProps = {};
-Transformation.contextTypes = {};
+Transformation.contextTypes = {};
+
+export default Transformation;

src/components/Video/Video.js

@@ -10,3 +10,6 @@ import React, {Component, PropTypes} from 'react';
 
-export default class Video extends CloudinaryComponent {
+/**
+ * A component representing a Cloudinary served video
+ */
+class Video extends CloudinaryComponent {
   constructor(props) {
@@ -24,3 +27,3 @@ super(props);
     options = CloudinaryComponent.normalizeOptions(options, {});
-    let cld = Cloudinary.new(options);
+    let cld = Cloudinary.new(Util.withSnakeCaseKeys(options));
     let sources = [];
@@ -30,3 +33,3 @@ let tagAttributes = Transformation.new(options).toHtmlAttributes();
       let defaults = poster.publicId !== undefined && poster.publicId !== null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
-      poster = cld.url(poster.publicId || publicId, Util.defaults({}, poster, defaults));
+      poster = cld.url(poster.publicId || publicId, Util.defaults({}, Util.withSnakeCaseKeys(poster), defaults));
     }
@@ -62,2 +65,4 @@ if (!Util.isEmpty(poster)) {
 Video.defaultProps = {};
-Video.contextTypes = CloudinaryComponent.contextTypes;
+Video.contextTypes = CloudinaryComponent.contextTypes;
+
+export default Video;

src/Util/closestAbove.js

@@ -6,2 +6,3 @@ /**
  * @returns {*}
+ * @protected
  */
@@ -8,0 +9,0 @@ export default function closestAbove(list, value) {

src/Util/debounce.js

@@ -7,2 +7,3 @@ /**
  * @returns {function()} debounced function
+ * @protected
  */
@@ -9,0 +10,0 @@ export default function debounce(func, wait, immediate) {

src/Util/firstDefined.js

@@ -5,8 +5,9 @@ /**
  * @returns {*}
+ * @protected
  */
 export default function firstDefined(...values){
-  for(let value of values) {
-    if(value !== undefined) return value;
+  for(let i = 0; i < values.length; i++) {
+    if(values[i] !== undefined) return values[i];
   }
   return undefined;
 }

src/Util/isElement.js

@@ -11,2 +11,3 @@ // Originally from lodash
  * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.
+ * @protected
  * @example
@@ -13,0 +14,0 @@ *

New alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1204375

increased by847.77%

Number of package files

92

increased by91.67%

Lines of code

3334

increased by24.26%

Number of lines in readme file

118

increased by1.72%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

No dependency changes