image-upload-react - npm Package Compare versions

Comparing version 1.3.9 to 1.4.5

dist/index.js

@@ -6,3 +6,90 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var fa = require('react-icons/fa');
+var styled = _interopDefault(require('styled-components'));
 
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteralLoose(["\n  max-width: 100px;\n  max-height: 100px;\n  min-width: 50px;\n  min-height: 50px;\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  z-index: 999999999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n\n  img {\n    object-fit: fill !important;\n    width: 100%;\n    height: 100%;\n  }\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 999;\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteralLoose(["\n  background-color: gold;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 99;\n  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.356);\n  margin-bottom: 0.5rem;\n  margin-right: auto;\n  margin-left: auto;\n  margin-top: 3rem;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var PhotoPicker = styled.div(_templateObject());
+var PhotoPickerInputWrapper = styled.div(_templateObject2());
+var PhotoPickerInput = styled.input(_templateObject3());
+var PhotoPickerIcon = styled.div(_templateObject4());
+var PhotoPickerImagePreviewWrapper = styled.div(_templateObject5());
+var PhotoPickerImagePreviewBox = styled.div(_templateObject6());
+var PhotoPickerDeleteIcon = styled.div(_templateObject7());
+
 function ImageUpload(_ref) {
@@ -12,2 +99,5 @@ var imageSrc = _ref.imageSrc,
       handleImageSelect = _ref.handleImageSelect,
+      deleteIcon = _ref.deleteIcon,
+      defaultDeleteIconSize = _ref.defaultDeleteIconSize,
+      defaultDeleteIconColor = _ref.defaultDeleteIconColor,
       _ref$style = _ref.style,
@@ -43,75 +133,21 @@ style = _ref$style === void 0 ? {
     }
-  }, imageSrc ? /*#__PURE__*/React__default.createElement("div", {
-    className: "create-book-image-preview-icon-container _2B-m5",
-    style: {
-      width: '50px',
-      height: '50px',
-      borderRadius: '50%',
-      backgroundColor: 'tomato',
-      position: 'absolute',
-      top: 0,
-      right: '50%',
-      left: '50%',
-      transform: 'translate(-50%,-50%)',
-      zIndex: 99999999,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(fa.FaTrash, {
-    size: 30,
-    color: "#fff",
+  }, imageSrc ? /*#__PURE__*/React__default.createElement(PhotoPickerDeleteIcon, {
     onClick: function onClick() {
       setImageSrc('');
-    },
-    className: "create-book-image-preview-icon"
-  })) : null, /*#__PURE__*/React__default.createElement("div", {
-    className: "create-book-photo-picker _FCdzt",
+    }
+  }, deleteIcon || /*#__PURE__*/React__default.createElement(fa.FaTrash, {
+    size: defaultDeleteIconSize || 30,
+    color: defaultDeleteIconColor || '#fff'
+  })) : null, /*#__PURE__*/React__default.createElement(PhotoPicker, {
     style: style
-  }, imageSrc ? /*#__PURE__*/React__default.createElement("div", {
-    className: "create-book-image-preview-container _GQrmn",
-    style: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      zIndex: 99999999
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "create-book-image-preview-image-box _2zJnR",
-    style: {
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React__default.createElement("img", {
+  }, imageSrc ? /*#__PURE__*/React__default.createElement(PhotoPickerImagePreviewWrapper, null, /*#__PURE__*/React__default.createElement(PhotoPickerImagePreviewBox, null, /*#__PURE__*/React__default.createElement("img", {
     src: imageSrc,
-    alt: "pick image",
-    className: "image _2hdkJ",
-    style: {
-      width: '100%',
-      objectFit: 'fill',
-      height: '100%'
-    }
-  }))) : /*#__PURE__*/React__default.createElement(fa.FaArrowCircleUp, {
+    alt: "pick image"
+  }))) : /*#__PURE__*/React__default.createElement(PhotoPickerIcon, null, /*#__PURE__*/React__default.createElement(fa.FaArrowCircleUp, {
     size: 70,
-    color: "#fff",
-    className: "create-book-photo-icon _1pmC5"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "create-book-image-input-container _1n017",
-    style: {
-      overflow: 'hidden',
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement("input", {
+    color: "#fff"
+  })), /*#__PURE__*/React__default.createElement(PhotoPickerInputWrapper, null, /*#__PURE__*/React__default.createElement(PhotoPickerInput, {
     type: "file",
     name: "photo",
-    className: "create-book-photo-input _2SsMH",
     placeholder: "select the book photo",
-    style: {
-      opacity: 0,
-      width: '100%',
-      height: '100%'
-    },
     accept: "image/*",
@@ -118,0 +154,0 @@ onChange: handleImageSelect,

dist/index.modern.js

 import React, { useEffect } from 'react';
 import { FaTrash, FaArrowCircleUp } from 'react-icons/fa';
+import styled from 'styled-components';
 
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteralLoose(["\n  max-width: 100px;\n  max-height: 100px;\n  min-width: 50px;\n  min-height: 50px;\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  z-index: 999999999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n\n  img {\n    object-fit: fill !important;\n    width: 100%;\n    height: 100%;\n  }\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 999;\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteralLoose(["\n  background-color: gold;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 99;\n  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.356);\n  margin-bottom: 0.5rem;\n  margin-right: auto;\n  margin-left: auto;\n  margin-top: 3rem;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var PhotoPicker = styled.div(_templateObject());
+var PhotoPickerInputWrapper = styled.div(_templateObject2());
+var PhotoPickerInput = styled.input(_templateObject3());
+var PhotoPickerIcon = styled.div(_templateObject4());
+var PhotoPickerImagePreviewWrapper = styled.div(_templateObject5());
+var PhotoPickerImagePreviewBox = styled.div(_templateObject6());
+var PhotoPickerDeleteIcon = styled.div(_templateObject7());
+
 function ImageUpload(_ref) {
@@ -8,2 +95,5 @@ var imageSrc = _ref.imageSrc,
       handleImageSelect = _ref.handleImageSelect,
+      deleteIcon = _ref.deleteIcon,
+      defaultDeleteIconSize = _ref.defaultDeleteIconSize,
+      defaultDeleteIconColor = _ref.defaultDeleteIconColor,
       _ref$style = _ref.style,
@@ -39,75 +129,21 @@ style = _ref$style === void 0 ? {
     }
-  }, imageSrc ? /*#__PURE__*/React.createElement("div", {
-    className: "create-book-image-preview-icon-container _2B-m5",
-    style: {
-      width: '50px',
-      height: '50px',
-      borderRadius: '50%',
-      backgroundColor: 'tomato',
-      position: 'absolute',
-      top: 0,
-      right: '50%',
-      left: '50%',
-      transform: 'translate(-50%,-50%)',
-      zIndex: 99999999,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(FaTrash, {
-    size: 30,
-    color: "#fff",
+  }, imageSrc ? /*#__PURE__*/React.createElement(PhotoPickerDeleteIcon, {
     onClick: function onClick() {
       setImageSrc('');
-    },
-    className: "create-book-image-preview-icon"
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: "create-book-photo-picker _FCdzt",
+    }
+  }, deleteIcon || /*#__PURE__*/React.createElement(FaTrash, {
+    size: defaultDeleteIconSize || 30,
+    color: defaultDeleteIconColor || '#fff'
+  })) : null, /*#__PURE__*/React.createElement(PhotoPicker, {
     style: style
-  }, imageSrc ? /*#__PURE__*/React.createElement("div", {
-    className: "create-book-image-preview-container _GQrmn",
-    style: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      zIndex: 99999999
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "create-book-image-preview-image-box _2zJnR",
-    style: {
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, imageSrc ? /*#__PURE__*/React.createElement(PhotoPickerImagePreviewWrapper, null, /*#__PURE__*/React.createElement(PhotoPickerImagePreviewBox, null, /*#__PURE__*/React.createElement("img", {
     src: imageSrc,
-    alt: "pick image",
-    className: "image _2hdkJ",
-    style: {
-      width: '100%',
-      objectFit: 'fill',
-      height: '100%'
-    }
-  }))) : /*#__PURE__*/React.createElement(FaArrowCircleUp, {
+    alt: "pick image"
+  }))) : /*#__PURE__*/React.createElement(PhotoPickerIcon, null, /*#__PURE__*/React.createElement(FaArrowCircleUp, {
     size: 70,
-    color: "#fff",
-    className: "create-book-photo-icon _1pmC5"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "create-book-image-input-container _1n017",
-    style: {
-      overflow: 'hidden',
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("input", {
+    color: "#fff"
+  })), /*#__PURE__*/React.createElement(PhotoPickerInputWrapper, null, /*#__PURE__*/React.createElement(PhotoPickerInput, {
     type: "file",
     name: "photo",
-    className: "create-book-photo-input _2SsMH",
     placeholder: "select the book photo",
-    style: {
-      opacity: 0,
-      width: '100%',
-      height: '100%'
-    },
     accept: "image/*",
@@ -114,0 +150,0 @@ onChange: handleImageSelect,

package.json

 {
   "name": "image-upload-react",
-  "version": "1.3.9",
+  "version": "1.4.5",
   "description": "react image picker",
@@ -62,4 +62,5 @@ "author": "Abd-Alwahab",
   "dependencies": {
-    "react-icons": "^3.11.0"
+    "react-icons": "^3.11.0",
+    "styled-components": "^5.3.0"
   }
 }

README.md

@@ -50,4 +50,13 @@ # image-upload-react
 
+## Docs
+
+| Property          | Description                                                                                                 | Required |
+| ----------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
+| handleImageSelect | function that will get fired when the user pick an image and we will update the state with the piacked file | true     |
+| imageSrc          | peace of state to keep track of the slected file                                                            | true     |
+| setImageSrc       | function that will update the value in the state                                                            | true     |
+| style             | style object to style the parent div for the ImageUpload component                                          | false    |
+
 ## License
 
 MIT © [Abd-Alwahab](https://github.com/Abd-Alwahab)

No alert changes

Improved metrics

Total package byte prevSize

29704

increased by16.96%

Lines of code

328

increased by10.07%

Number of lines in readme file

62

increased by16.98%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedstyled-components@^5.3.0

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.8(transitive)

• + Added@babel/core@7.26.8(transitive)

• + Added@babel/generator@7.26.8(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.7(transitive)

• + Added@babel/parser@7.26.8(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.26.8(transitive)

• + Added@babel/traverse@7.26.8(transitive)

• + Added@babel/types@7.26.8(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/gensync@1.0.4(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001699(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.97(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedstyled-components@5.3.11(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedyallist@3.1.1(transitive)