react-cropper - npm Package Compare versions

Comparing version 2.1.8 to 2.2.0-0

dist/react-cropper.es.js

@@ -42,2 +42,3 @@ import React, { useRef, useEffect } from 'react';
 
+var REQUIRED_IMAGE_STYLES = { opacity: 0, maxWidth: '100%' };
 var applyDefaultOptions = function (cropper, options) {
@@ -117,7 +118,7 @@ if (options === void 0) { options = {}; }
     }, [combinedRef]);
+    var imageProps = React.useMemo(function () { return (__assign(__assign({}, rest), { crossOrigin: crossOrigin, src: src, alt: alt })); }, [rest, crossOrigin, src, alt]);
     return (React.createElement("div", { style: style, className: className },
-        React.createElement("img", { crossOrigin: crossOrigin, src: src, alt: alt, style: { opacity: 0, maxWidth: '100%' }, ref: combinedRef })));
+        React.createElement("img", __assign({}, imageProps, { style: REQUIRED_IMAGE_STYLES, ref: combinedRef }))));
 });
 
-export default ReactCropper;
-export { ReactCropper as Cropper };
+export { ReactCropper as Cropper, ReactCropper as default };

dist/react-cropper.umd.js

@@ -51,2 +51,3 @@ 'use strict';
 
+var REQUIRED_IMAGE_STYLES = { opacity: 0, maxWidth: '100%' };
 var applyDefaultOptions = function (cropper, options) {
@@ -70,3 +71,3 @@ if (options === void 0) { options = {}; }
     var targetRef = React.useRef(null);
-    React__default['default'].useEffect(function () {
+    React__default["default"].useEffect(function () {
         refs.forEach(function (ref) {
@@ -85,3 +86,3 @@ if (!ref)
 };
-var ReactCropper = React__default['default'].forwardRef(function (_a, ref) {
+var ReactCropper = React__default["default"].forwardRef(function (_a, ref) {
     var props = __rest(_a, []);
@@ -112,3 +113,3 @@ var _b = props.dragMode, dragMode = _b === void 0 ? 'crop' : _b, src = props.src, style = props.style, className = props.className, crossOrigin = props.crossOrigin, scaleX = props.scaleX, scaleY = props.scaleY, enable = props.enable, zoomTo = props.zoomTo, rotateTo = props.rotateTo, _c = props.alt, alt = _c === void 0 ? 'picture' : _c, ready = props.ready, onInitialized = props.onInitialized, rest = __rest(props, ["dragMode", "src", "style", "className", "crossOrigin", "scaleX", "scaleY", "enable", "zoomTo", "rotateTo", "alt", "ready", "onInitialized"]);
         if (combinedRef.current !== null) {
-            var cropper = new Cropper__default['default'](combinedRef.current, __assign(__assign({ dragMode: dragMode }, rest), { ready: function (e) {
+            var cropper = new Cropper__default["default"](combinedRef.current, __assign(__assign({ dragMode: dragMode }, rest), { ready: function (e) {
                     if (e.currentTarget !== null) {
@@ -129,7 +130,8 @@ applyDefaultOptions(e.currentTarget.cropper, defaultOptions);
     }, [combinedRef]);
-    return (React__default['default'].createElement("div", { style: style, className: className },
-        React__default['default'].createElement("img", { crossOrigin: crossOrigin, src: src, alt: alt, style: { opacity: 0, maxWidth: '100%' }, ref: combinedRef })));
+    var imageProps = React__default["default"].useMemo(function () { return (__assign(__assign({}, rest), { crossOrigin: crossOrigin, src: src, alt: alt })); }, [rest, crossOrigin, src, alt]);
+    return (React__default["default"].createElement("div", { style: style, className: className },
+        React__default["default"].createElement("img", __assign({}, imageProps, { style: REQUIRED_IMAGE_STYLES, ref: combinedRef }))));
 });
 
 exports.Cropper = ReactCropper;
-exports.default = ReactCropper;
+exports["default"] = ReactCropper;

jest.config.js

@@ -9,3 +9,3 @@ module.exports = {
     testMatch: ['<rootDir>/tests/**/*.{spec,test}.{js,jsx,ts,tsx}'],
-    testEnvironment: 'jest-environment-jsdom-sixteen',
+    testEnvironment: 'jest-environment-jsdom',
     transform: {
@@ -12,0 +12,0 @@ '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',

package.json

 {
   "name": "react-cropper",
-  "version": "2.1.8",
+  "version": "2.2.0-0",
   "description": "Cropper as React Component",
@@ -9,3 +9,3 @@ "main": "dist/react-cropper.umd.js",
   "scripts": {
-    "test": "jest --coverage --forceExit --detectOpenHandles",
+    "test": "jest --coverage --forceExit",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src ./example",
@@ -45,41 +45,41 @@ "build": "yarn clean && rollup -c rollup.config.ts",
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=17.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-transform-object-assign": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/runtime": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/runtime": "^7.15.4",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-replace": "^3.0.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
+    "@testing-library/react": "^12.1.2",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.9",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
-    "babel-jest": "^26.2.2",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "babel-jest": "^27.2.5",
     "babel-preset-react-app": "^10.0.0",
-    "browser-sync": "^2.27.3",
+    "browser-sync": "^2.27.5",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.29.0",
+    "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^26.2.2",
-    "jest-environment-jsdom-sixteen": "^2.0.0",
+    "jest": "^27.2.5",
+    "jest-environment-jsdom": "^27.2.5",
     "np": "^7.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.5",
-    "prettier": "2.3.2",
+    "postcss": "^8.3.9",
+    "prettier": "2.4.1",
     "react": "^17.0.1",
@@ -90,8 +90,8 @@ "react-app-polyfill": "^2.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.52.3",
+    "rollup": "^2.58.0",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.30.0",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.4"
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
   },
@@ -98,0 +98,0 @@ "config": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92145

0.38%

Lines of code

960

0.31%

Worsened metrics

Number of low quality alerts

1

Infinity%

No dependency changes