react-extras - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

dist/index.js

@@ -6,45 +6,70 @@ "use strict";
 });
-exports.BodyClass = exports.RootClass = exports.For = exports.Choose = exports.If = exports.canUseDOM = exports.getDisplayName = exports.isStatelessComponent = exports.classNames = exports.autoBind = void 0;
+Object.defineProperty(exports, "autoBind", {
+  enumerable: true,
+  get: function get() {
+    return _autoBind.react;
+  }
+});
+Object.defineProperty(exports, "classNames", {
+  enumerable: true,
+  get: function get() {
+    return _classNames.default;
+  }
+});
+Object.defineProperty(exports, "If", {
+  enumerable: true,
+  get: function get() {
+    return _if.default;
+  }
+});
+Object.defineProperty(exports, "Choose", {
+  enumerable: true,
+  get: function get() {
+    return _choose.default;
+  }
+});
+Object.defineProperty(exports, "For", {
+  enumerable: true,
+  get: function get() {
+    return _for.default;
+  }
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function get() {
+    return _image.default;
+  }
+});
+Object.defineProperty(exports, "RootClass", {
+  enumerable: true,
+  get: function get() {
+    return _rootClass.default;
+  }
+});
+Object.defineProperty(exports, "BodyClass", {
+  enumerable: true,
+  get: function get() {
+    return _bodyClass.default;
+  }
+});
+exports.canUseDOM = exports.getDisplayName = exports.isStatelessComponent = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _autoBind = require("./auto-bind");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classNames = _interopRequireDefault(require("./class-names"));
 
-var _autoBind2 = _interopRequireDefault(require("./auto-bind"));
+var _if = _interopRequireDefault(require("./if"));
 
-var _classNames2 = _interopRequireDefault(require("./class-names"));
+var _choose = _interopRequireDefault(require("./choose"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _for = _interopRequireDefault(require("./for"));
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _image = _interopRequireDefault(require("./image"));
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+var _rootClass = _interopRequireDefault(require("./root-class"));
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+var _bodyClass = _interopRequireDefault(require("./body-class"));
 
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var autoBind = _autoBind2.default.react;
-exports.autoBind = autoBind;
-var classNames = _classNames2.default;
-exports.classNames = classNames;
-
 var isStatelessComponent = function isStatelessComponent(Component) {
@@ -62,159 +87,2 @@ return !(typeof Component.prototype !== 'undefined' && typeof Component.prototype.render === 'function');
 var canUseDOM = typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document;
-exports.canUseDOM = canUseDOM;
-
-var If = function If(props) {
-  return props.condition ? props.render ? props.render() : props.children : null;
-};
-
-exports.If = If;
-If.propTypes = {
-  condition: _propTypes.default.bool.isRequired,
-  children: _propTypes.default.node,
-  render: _propTypes.default.func
-};
-
-var Choose = function Choose(props) {
-  var when = null;
-  var otherwise = null;
-
-  _react.default.Children.forEach(props.children, function (children) {
-    if (children.props.condition === undefined) {
-      otherwise = children;
-    } else if (!when && children.props.condition === true) {
-      when = children;
-    }
-  });
-
-  return when || otherwise;
-};
-
-exports.Choose = Choose;
-Choose.propTypes = {
-  children: _propTypes.default.node
-};
-Choose.When = If;
-
-Choose.Otherwise = function (_ref) {
-  var render = _ref.render,
-      children = _ref.children;
-  return render ? render() : children;
-};
-
-Choose.Otherwise.propTypes = {
-  children: _propTypes.default.node,
-  render: _propTypes.default.func
-};
-
-var For = function For(_ref2) {
-  var render = _ref2.render,
-      of = _ref2.of;
-  return of.map(function (item, index) {
-    return render(item, index);
-  });
-};
-
-exports.For = For;
-For.propTypes = {
-  of: _propTypes.default.array.isRequired,
-  render: _propTypes.default.func.isRequired
-};
-
-var ElementClass =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  _inherits(ElementClass, _React$PureComponent);
-
-  function ElementClass() {
-    _classCallCheck(this, ElementClass);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(ElementClass).apply(this, arguments));
-  }
-
-  _createClass(ElementClass, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      var _this$props = this.props,
-          add = _this$props.add,
-          remove = _this$props.remove;
-      var classList = this.element.classList;
-
-      if (add) {
-        classList.add.apply(classList, _toConsumableArray(add.trim().split(' ')));
-      }
-
-      if (remove) {
-        classList.remove.apply(classList, _toConsumableArray(remove.trim().split(' ')));
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$props2 = this.props,
-          add = _this$props2.add,
-          remove = _this$props2.remove;
-      var classList = this.element.classList;
-
-      if (add) {
-        classList.remove.apply(classList, _toConsumableArray(add.trim().split(' ')));
-      }
-
-      if (remove) {
-        classList.add.apply(classList, _toConsumableArray(remove.trim().split(' ')));
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return ElementClass;
-}(_react.default.PureComponent);
-
-ElementClass.propTypes = {
-  add: _propTypes.default.string,
-  remove: _propTypes.default.string
-};
-
-var RootClass =
-/*#__PURE__*/
-function (_ElementClass) {
-  _inherits(RootClass, _ElementClass);
-
-  function RootClass() {
-    var _this;
-
-    _classCallCheck(this, RootClass);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(RootClass).call(this));
-    _this.element = document.documentElement;
-    return _this;
-  }
-
-  return RootClass;
-}(ElementClass);
-
-exports.RootClass = RootClass;
-RootClass.propTypes = ElementClass.propTypes;
-
-var BodyClass =
-/*#__PURE__*/
-function (_ElementClass2) {
-  _inherits(BodyClass, _ElementClass2);
-
-  function BodyClass() {
-    var _this2;
-
-    _classCallCheck(this, BodyClass);
-
-    _this2 = _possibleConstructorReturn(this, _getPrototypeOf(BodyClass).call(this));
-    _this2.element = document.body;
-    return _this2;
-  }
-
-  return BodyClass;
-}(ElementClass);
-
-exports.BodyClass = BodyClass;
-BodyClass.propTypes = ElementClass.propTypes;
+exports.canUseDOM = canUseDOM;

index.d.ts

@@ -45,2 +45,9 @@ import * as React from 'react';
 
+interface ImageProps extends React.HTMLProps<HTMLImageElement> {
+	url: string;
+	fallbackUrl: string;
+}
+
+export class Image extends React.Component<ImageProps> {}
+
 interface ElementClassProps {
@@ -47,0 +54,0 @@ add?: string;

package.json

 {
 	"name": "react-extras",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "Useful components and utilities for working with React",
@@ -17,3 +17,3 @@ "license": "MIT",
 	"scripts": {
-		"build": "babel index.js auto-bind.js class-names.js --out-dir=dist",
+		"build": "babel 'source/*.js' --out-dir=dist",
 		"test": "xo && ava && tsd-check",
@@ -46,3 +46,3 @@ "prepublishOnly": "npm run build"
 	"dependencies": {
-		"prop-types": "^15.6.0"
+		"prop-types": "^15.6.2"
 	},
@@ -58,3 +58,3 @@ "devDependencies": {
 		"babel-eslint": "^10.0.1",
-		"browser-env": "^3.2.4",
+		"browser-env": "^3.2.5",
 		"jest-prop-type-error": "^1.1.0",
@@ -68,3 +68,3 @@ "react": "^16.7.0",
 	"peerDependencies": {
-		"react": ">=16"
+		"react": ">=16.7"
 	},
@@ -78,7 +78,8 @@ "xo": {
 		"rules": {
-			"import/no-unresolved": "off"
+			"import/no-unresolved": "off",
+			"no-unused-vars": "off"
 		},
 		"ignores": [
-			"auto-bind.js",
-			"class-names.js"
+			"source/auto-bind.js",
+			"source/class-names.js"
 		]
@@ -85,0 +86,0 @@ },

readme.md

@@ -181,2 +181,17 @@ # react-extras [![Build Status](https://travis-ci.org/sindresorhus/react-extras.svg?branch=master)](https://travis-ci.org/sindresorhus/react-extras)
 
+### `<Image/>`
+
+React component that improves the `<img>` element.
+
+It makes the image invisible if it fails to load instead of showing the default broken image icon. Optionally, specify a fallback image URL.
+
+```jsx
+<Image
+	url="https://sindresorhus.com/unicorn.jpg"
+	fallbackUrl="https://sindresorhus.com/rainbow.jpg"
+/>
+```
+
+It supports all the props that `<img>` supports, but you use the prop `url` instead of `src`.
+
 ### `<RootClass/>`
@@ -183,0 +198,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32900

increased by10.21%

Number of package files

14

increased by75%

Lines of code

483

increased by48.62%

Number of lines in readme file

261

increased by6.1%

Number of medium supply chain risk alerts

1

decreased by-50%

Dependency changes

• Updatedprop-types@^15.6.2