react-image-upload - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,l,a=[],o=!0,u=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){u=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(u)throw l}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function i(e){var t=e.element,n=e.color;return t?r.default.createElement(r.default.Fragment,null,t):r.default.createElement("svg",{width:"50",height:"50",viewBox:"0 0 50 50",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.default.createElement("path",{d:"M8.33332 8.33332H14.5833L18.75 4.16666H31.25L35.4167 8.33332H41.6667C42.7717 8.33332 43.8315 8.77231 44.6129 9.55371C45.3943 10.3351 45.8333 11.3949 45.8333 12.5V37.5C45.8333 38.6051 45.3943 39.6649 44.6129 40.4463C43.8315 41.2277 42.7717 41.6666 41.6667 41.6666H8.33332C7.22825 41.6666 6.16845 41.2277 5.38704 40.4463C4.60564 39.6649 4.16666 38.6051 4.16666 37.5V12.5C4.16666 11.3949 4.60564 10.3351 5.38704 9.55371C6.16845 8.77231 7.22825 8.33332 8.33332 8.33332ZM25 14.5833C22.2373 14.5833 19.5878 15.6808 17.6343 17.6343C15.6808 19.5878 14.5833 22.2373 14.5833 25C14.5833 27.7627 15.6808 30.4122 17.6343 32.3657C19.5878 34.3192 22.2373 35.4167 25 35.4167C27.7627 35.4167 30.4122 34.3192 32.3657 32.3657C34.3192 30.4122 35.4167 27.7627 35.4167 25C35.4167 22.2373 34.3192 19.5878 32.3657 17.6343C30.4122 15.6808 27.7627 14.5833 25 14.5833ZM25 18.75C26.6576 18.75 28.2473 19.4085 29.4194 20.5806C30.5915 21.7527 31.25 23.3424 31.25 25C31.25 26.6576 30.5915 28.2473 29.4194 29.4194C28.2473 30.5915 26.6576 31.25 25 31.25C23.3424 31.25 21.7527 30.5915 20.5806 29.4194C19.4085 28.2473 18.75 26.6576 18.75 25C18.75 23.3424 19.4085 21.7527 20.5806 20.5806C21.7527 19.4085 23.3424 18.75 25 18.75Z",fill:n||"#848484"}))}function c(e){var t=e.icon;return t?r.default.createElement(r.default.Fragment,null,t):r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"#848484"},r.default.createElement("path",{d:"M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-14v-4h14v4z"}))}module.exports=function(t){var n=t.onFileAdded,a=t.onFileRemoved,u=t.uploadElement,f=t.deleteIcon,d=t.style,s=o(e.useState({}),2),p=s[0],m=s[1];r.default.useEffect((function(){n&&n(p)}),[p]);return r.default.createElement("div",{className:"uploader__container"},r.default.createElement("div",{className:"uploader__placeholder",style:d},r.default.createElement("div",{className:"uploader__btn_wrapper"},r.default.createElement("div",{className:"uploader__btn",onClick:function(){a&&Object.keys(p).length>0&&a(p),m({})}},r.default.createElement(c,{icon:f}))),!(null!=p&&p.dataUrl)&&r.default.createElement("label",{id:"file_uploader",className:"uploader__file_input_label"},r.default.createElement(i,{element:u,color:null==d?void 0:d.color}),r.default.createElement("input",{className:"uploader__file_input",key:p,type:"file",name:"upload",onChange:function(e){if(e.target.files.length>0){var t={file:e.target.files[0],dataUrl:URL.createObjectURL(e.target.files[0])};m((function(e){return l(l({},e),t)}))}},accept:"image/*",id:"file_uploader"})),(null==p?void 0:p.dataUrl)&&r.default.createElement("img",{className:"uploader__file",src:null==p?void 0:p.dataUrl,alt:null==p?void 0:p.dataUrl,loading:"lazy"})))};
+"use strict";var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,l,a=[],o=!0,u=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){u=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(u)throw l}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function i(e){var t=e.element;return t?r.default.createElement(r.default.Fragment,null,t):r.default.createElement("svg",{width:"50",height:"50",viewBox:"0 0 50 50",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.default.createElement("path",{d:"M8.33332 8.33332H14.5833L18.75 4.16666H31.25L35.4167 8.33332H41.6667C42.7717 8.33332 43.8315 8.77231 44.6129 9.55371C45.3943 10.3351 45.8333 11.3949 45.8333 12.5V37.5C45.8333 38.6051 45.3943 39.6649 44.6129 40.4463C43.8315 41.2277 42.7717 41.6666 41.6667 41.6666H8.33332C7.22825 41.6666 6.16845 41.2277 5.38704 40.4463C4.60564 39.6649 4.16666 38.6051 4.16666 37.5V12.5C4.16666 11.3949 4.60564 10.3351 5.38704 9.55371C6.16845 8.77231 7.22825 8.33332 8.33332 8.33332ZM25 14.5833C22.2373 14.5833 19.5878 15.6808 17.6343 17.6343C15.6808 19.5878 14.5833 22.2373 14.5833 25C14.5833 27.7627 15.6808 30.4122 17.6343 32.3657C19.5878 34.3192 22.2373 35.4167 25 35.4167C27.7627 35.4167 30.4122 34.3192 32.3657 32.3657C34.3192 30.4122 35.4167 27.7627 35.4167 25C35.4167 22.2373 34.3192 19.5878 32.3657 17.6343C30.4122 15.6808 27.7627 14.5833 25 14.5833ZM25 18.75C26.6576 18.75 28.2473 19.4085 29.4194 20.5806C30.5915 21.7527 31.25 23.3424 31.25 25C31.25 26.6576 30.5915 28.2473 29.4194 29.4194C28.2473 30.5915 26.6576 31.25 25 31.25C23.3424 31.25 21.7527 30.5915 20.5806 29.4194C19.4085 28.2473 18.75 26.6576 18.75 25C18.75 23.3424 19.4085 21.7527 20.5806 20.5806C21.7527 19.4085 23.3424 18.75 25 18.75Z",fill:"#848484"}))}function c(e){var t=e.icon;return t?r.default.createElement(r.default.Fragment,null,t):r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"#848484"},r.default.createElement("path",{d:"M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-14v-4h14v4z"}))}module.exports=function(t){var n=t.onFileAdded,a=t.onFileRemoved,u=t.uploadIcon,f=t.deleteIcon,d=t.style,s=o(e.useState({}),2),p=s[0],m=s[1];e.useEffect((function(){n&&n(p)}),[p]);return r.default.createElement("div",{className:"uploader__container"},r.default.createElement("div",{className:"uploader__placeholder",style:d},r.default.createElement("div",{className:"uploader__btn_wrapper"},r.default.createElement("div",{className:"uploader__btn",onClick:function(){a&&Object.keys(p).length>0&&a(p),m({})}},r.default.createElement(c,{icon:f}))),!(null!=p&&p.dataUrl)&&r.default.createElement("label",{id:"file_uploader",className:"uploader__file_input_label"},r.default.createElement(i,{element:u,color:null==d?void 0:d.color}),r.default.createElement("input",{className:"uploader__file_input",key:p,type:"file",name:"upload",onChange:function(e){if(e.target.files.length>0){var t={file:e.target.files[0],dataUrl:URL.createObjectURL(e.target.files[0])};m((function(e){return l(l({},e),t)}))}},accept:"image/*",id:"file_uploader"})),(null==p?void 0:p.dataUrl)&&r.default.createElement("img",{className:"uploader__file",src:null==p?void 0:p.dataUrl,alt:null==p?void 0:p.dataUrl,loading:"lazy"})))};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-image-upload",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "react library for uploading images",
@@ -30,4 +30,3 @@ "author": "chimdie",
   "peerDependencies": {
-    "react": "^16.0.0",
-    "styled-components": ">= 3"
+    "react": "^16.0.0"
   },
@@ -66,4 +65,3 @@ "devDependencies": {
     "rollup-plugin-styles": "^3.14.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "styled-components": "^5.3.3"
+    "rollup-plugin-terser": "^7.0.2"
   },
@@ -70,0 +68,0 @@ "files": [

README.md

 # react-image-upload
 
-React package for uploading images.
+A react library for uploading image. [Demo](https://codesandbox.io/s/weathered-monad-ffdf7?file=/src/App.js)
 
@@ -13,3 +13,3 @@ [![NPM](https://img.shields.io/npm/v/react-image-upload.svg)](https://www.npmjs.com/package/react-image-upload) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## Usage
+## Examples
 
@@ -22,58 +22,12 @@ ```jsx
   function getImageFileObject(imageFile) {
-    console.log({ onAdd: imageFile })
+    console.log({ imageFile })
   }
   function runAfterImageDelete(file) {
-    console.log({ onDele: file })
+    console.log({ file })
   }
   return (
-    <div className='_dFlex'>
-      {/* example one */}
-      <div className='_m4'>
-        <ImageUploader
-          onFileAdded={(img) => getImageFileObject(img)}
-          onFileRemoved={(img) => runAfterImageDelete(img)}
-          height={200}
-          width={300}
-        />
-      </div>
-
-      {/* example 2 */}
-      <div className='_m4'>
-        <ImageUploader
-          onFileAdded={(img) => getImageFileObject(img)}
-          onFileRemoved={(img) => runAfterImageDelete(img)}
-          uploadElement={
-            <div>
-              <svg
-                class='svg-circleplus'
-                viewBox='0 0 100 100'
-                style={{ height: '20px', stroke: 'green' }}
-              >
-                <circle
-                  cx='50'
-                  cy='50'
-                  r='45'
-                  fill='none'
-                  strokeWidth='7.5'
-                ></circle>
-                <line
-                  x1='32.5'
-                  y1='50'
-                  x2='67.5'
-                  y2='50'
-                  strokeWidth='5'
-                ></line>
-                <line
-                  x1='50'
-                  y1='32.5'
-                  x2='50'
-                  y2='67.5'
-                  strokeWidth='5'
-                ></line>
-              </svg>
-            </div>
-          }
-        />
-      </div>
-    </div>
+    <ImageUploader
+      onFileAdded={(img) => getImageFileObject(img)}
+      onFileRemoved={(img) => runAfterImageDelete(img)}
+    />
   )
@@ -85,4 +39,39 @@ }
 
+### Adding props
+
+```jsx
+<ImageUploader
+  style={{ height: 200, width: 200, background: 'rgb(0 182 255)' }}
+  deleteIcon={
+    <img
+      src='https://img.icons8.com/ios-glyphs/30/000000/delete-sign.png'
+      alt=''
+    />
+  }
+  uploadIcon={
+    <svg
+      className='svg-circleplus'
+      viewBox='0 0 100 100'
+      style={{ height: '40px', stroke: '#000' }}
+    >
+      <circle cx='50' cy='50' r='45' fill='none' strokeWidth='7.5'></circle>
+      <line x1='32.5' y1='50' x2='67.5' y2='50' strokeWidth='5'></line>
+      <line x1='50' y1='32.5' x2='50' y2='67.5' strokeWidth='5'></line>
+    </svg>
+  }
+/>
+```
+
+## Props
+
+| Property      | Type | Default  | Description                                                     |
+| :------------ | :--: | -------- | --------------------------------------------------------------- |
+| style         | obj  | optional | style the file with css                                         |
+| deleteIcon    | func | optional | adds your delete icon or html element                           |
+| uploadIcon    | func | optional | adds your upload icon or html element                           |
+| onFileAdded   | func | optional | runs after file has been selected and returns the selected file |
+| onFileRemoved | func | optional | runs after file has been removed and returns the removed file   |
+
 ## License
 
 MIT © [chimdie](https://github.com/chimdie)

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

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

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

28622

increased by0.6%

Dependency count

2

decreased by-33.33%

Dev dependency count

32

decreased by-3.03%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

75

decreased by-12.79%

No dependency changes