react-images-uploading - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

 import * as React from "react";
 export interface ImageType {
-    src: string;
-    originFile?: File;
-    tempName?: string;
+    dataURL: string;
+    file?: File;
+    key?: string;
     onUpdate?: () => void;
@@ -7,0 +7,0 @@ onRemove?: () => void;

dist/index.es.js

@@ -81,3 +81,3 @@ import { useRef, useState, useEffect, createElement, Fragment } from 'react';
     // the "id unique" of the image that need update by new image upload
-    var _c = useState$1(""), tempNameUpdate = _c[0], setTempNameUpdate = _c[1];
+    var _c = useState$1(""), keyUpdate = _c[0], setKeyUpdate = _c[1];
     // for getting the latest imageList state
@@ -92,4 +92,4 @@ var imageListRef = useRef$1(imageList);
             var sData = list.map(function (item) { return ({
-                originFile: item.originFile,
-                src: item.src
+                file: item.file,
+                dataURL: item.dataURL
             }); });
@@ -108,4 +108,4 @@ onChange(sData);
     };
-    var onImageRemove = function (tempName) {
-        var updatedList = imageListRef.current.filter(function (item) { return item.tempName !== tempName; });
+    var onImageRemove = function (key) {
+        var updatedList = imageListRef.current.filter(function (item) { return item.key !== key; });
         setImageList(updatedList);
@@ -115,8 +115,8 @@ onStandardizeDataChange(updatedList);
     useEffect$1(function () {
-        if (tempNameUpdate) {
+        if (keyUpdate) {
             onImageUpload();
         }
-    }, [tempNameUpdate]);
-    var onImageUpdate = function (tempName) {
-        setTempNameUpdate(tempName);
+    }, [keyUpdate]);
+    var onImageUpdate = function (key) {
+        setKeyUpdate(key);
     };
@@ -131,9 +131,9 @@ // read files and add some needed properties, func for update/remove actions
             var fileList = fileListBase64.map(function (base64, index) {
-                var tempName = new Date().getTime().toString() + "-" + files[index].name;
+                var key = new Date().getTime().toString() + "-" + files[index].name;
                 return {
-                    src: base64,
-                    originFile: files[index],
-                    tempName: tempName,
-                    onUpdate: function () { return onImageUpdate(tempName); },
-                    onRemove: function () { return onImageRemove(tempName); }
+                    dataURL: base64,
+                    file: files[index],
+                    key: key,
+                    onUpdate: function () { return onImageUpdate(key); },
+                    onRemove: function () { return onImageRemove(key); }
                 };
@@ -156,9 +156,9 @@ });
                         updatedFileList = void 0;
-                        if (tempNameUpdate) {
+                        if (keyUpdate) {
                             updatedFileList = imageList.map(function (item) {
-                                if (item.tempName === tempNameUpdate)
+                                if (item.key === keyUpdate)
                                     return __assign({}, fileList_1[0]);
                                 return item;
                             });
-                            setTempNameUpdate("");
+                            setKeyUpdate("");
                         }
@@ -180,3 +180,3 @@ else {
                     else {
-                        tempNameUpdate && setTempNameUpdate("");
+                        keyUpdate && setKeyUpdate("");
                     }
@@ -189,7 +189,7 @@ _a.label = 2;
     return (createElement(Fragment, null,
-        createElement("input", { type: "file", accept: "image/*", ref: inputRef, multiple: mode === "multiple" && !tempNameUpdate, onChange: onInputChange, style: { display: " none" } }),
+        createElement("input", { type: "file", accept: "image/*", ref: inputRef, multiple: mode === "multiple" && !keyUpdate, onChange: onInputChange, style: { display: " none" } }),
         children({ imageList: imageList, onImageUpload: onImageUpload, onImageRemoveAll: onImageRemoveAll })));
 };
 ImageUploading.defaultProps = {
-    maxNumber: 10,
+    maxNumber: 100,
     mode: "single"
@@ -196,0 +196,0 @@ };

dist/index.js

@@ -85,3 +85,3 @@ 'use strict';
     // the "id unique" of the image that need update by new image upload
-    var _c = useState(""), tempNameUpdate = _c[0], setTempNameUpdate = _c[1];
+    var _c = useState(""), keyUpdate = _c[0], setKeyUpdate = _c[1];
     // for getting the latest imageList state
@@ -96,4 +96,4 @@ var imageListRef = useRef(imageList);
             var sData = list.map(function (item) { return ({
-                originFile: item.originFile,
-                src: item.src
+                file: item.file,
+                dataURL: item.dataURL
             }); });
@@ -112,4 +112,4 @@ onChange(sData);
     };
-    var onImageRemove = function (tempName) {
-        var updatedList = imageListRef.current.filter(function (item) { return item.tempName !== tempName; });
+    var onImageRemove = function (key) {
+        var updatedList = imageListRef.current.filter(function (item) { return item.key !== key; });
         setImageList(updatedList);
@@ -119,8 +119,8 @@ onStandardizeDataChange(updatedList);
     useEffect(function () {
-        if (tempNameUpdate) {
+        if (keyUpdate) {
             onImageUpload();
         }
-    }, [tempNameUpdate]);
-    var onImageUpdate = function (tempName) {
-        setTempNameUpdate(tempName);
+    }, [keyUpdate]);
+    var onImageUpdate = function (key) {
+        setKeyUpdate(key);
     };
@@ -135,9 +135,9 @@ // read files and add some needed properties, func for update/remove actions
             var fileList = fileListBase64.map(function (base64, index) {
-                var tempName = new Date().getTime().toString() + "-" + files[index].name;
+                var key = new Date().getTime().toString() + "-" + files[index].name;
                 return {
-                    src: base64,
-                    originFile: files[index],
-                    tempName: tempName,
-                    onUpdate: function () { return onImageUpdate(tempName); },
-                    onRemove: function () { return onImageRemove(tempName); }
+                    dataURL: base64,
+                    file: files[index],
+                    key: key,
+                    onUpdate: function () { return onImageUpdate(key); },
+                    onRemove: function () { return onImageRemove(key); }
                 };
@@ -160,9 +160,9 @@ });
                         updatedFileList = void 0;
-                        if (tempNameUpdate) {
+                        if (keyUpdate) {
                             updatedFileList = imageList.map(function (item) {
-                                if (item.tempName === tempNameUpdate)
+                                if (item.key === keyUpdate)
                                     return __assign({}, fileList_1[0]);
                                 return item;
                             });
-                            setTempNameUpdate("");
+                            setKeyUpdate("");
                         }
@@ -184,3 +184,3 @@ else {
                     else {
-                        tempNameUpdate && setTempNameUpdate("");
+                        keyUpdate && setKeyUpdate("");
                     }
@@ -193,7 +193,7 @@ _a.label = 2;
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { type: "file", accept: "image/*", ref: inputRef, multiple: mode === "multiple" && !tempNameUpdate, onChange: onInputChange, style: { display: " none" } }),
+        React.createElement("input", { type: "file", accept: "image/*", ref: inputRef, multiple: mode === "multiple" && !keyUpdate, onChange: onInputChange, style: { display: " none" } }),
         children({ imageList: imageList, onImageUpload: onImageUpload, onImageRemoveAll: onImageRemoveAll })));
 };
 ImageUploading.defaultProps = {
-    maxNumber: 10,
+    maxNumber: 100,
     mode: "single"
@@ -200,0 +200,0 @@ };

package.json

 {
   "name": "react-images-uploading",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": ">",
@@ -23,5 +23,3 @@ "author": "imvutoan",
     "start": "rollup -c -w",
-    "prepare": "yarn run build",
-    "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build"
+    "prepare": "yarn run build"
   },
@@ -35,3 +33,2 @@ "dependencies": {},
   "devDependencies": {
-    "@svgr/rollup": "^2.4.1",
     "@types/jest": "^23.1.5",
@@ -52,3 +49,2 @@ "@types/react": "^16.3.13",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
     "rollup-plugin-typescript2": "^0.17.0",
@@ -60,6 +56,3 @@ "rollup-plugin-url": "^1.4.0",
     "dist"
-  ],
-  "directories": {
-    "example": "example"
-  }
+  ]
 }

README.md

 # react-images-uploading
 
-> 
+>
 
 [![NPM](https://img.shields.io/npm/v/react-images-uploading.svg)](https://www.npmjs.com/package/react-images-uploading) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+# Images uploader
+
+A simple images uploader without UI. Building by yourself.
+
 ## Install
@@ -16,11 +20,34 @@
 ```tsx
-import * as React from 'react'
+import * as React from "react";
 
-import MyComponent from 'react-images-uploading'
+import ImageUploading from "react-images-uploading";
+// { ImageListType, ImageType } is type for typescript
 
+const mode = "single";
+const maxNumber = 10;
 class Example extends React.Component {
-  render () {
+  onChange = imageList => {
+    // data for submit
+  };
+
+  render() {
     return (
-      <MyComponent />
-    )
+      <ImageUploading mode={mode} onChange={onChange} maxNumber={maxNumber}>
+        {({ imageList, onImageUpload, onImageRemoveAll }) => (
+          // write your building UI
+          <div className="upload__image-wrapper">
+            <button onClick={onImageUpload}>Upload images</button>
+            <button onClick={onImageRemoveAll}>Remove all images</button>
+
+            {imageList.map(image => (
+              <div key={image.key}>
+                <img src={image.dataURL} />
+                <button onClick={image.onUpdate}>Update</button>
+                <button onClick={image.onRemove}>Remove</button>
+              </div>
+            ))}
+          </div>
+        )}
+      </ImageUploading>
+    );
   }
@@ -30,4 +57,21 @@ }
 
+## Props
+
+| parameter    | type     | options                | default  | description                                           |
+| ------------ | -------- | ---------------------- | -------- | ----------------------------------------------------- |
+| mode         | string   | single                 | multiple | single                                                | Select just one or multiple images |
+| maxNumber    | number   |                        | 100      | Number of images user can select if mode = "multiple" |
+| onChange     | function |                        |          | Called every update                                   |
+| defaultValue | array    | [{dataURL: ... }, ...] |          |                                                       |
+
+## Exported options
+
+| parameter        | type     | description                                                                                                                                                                                                                                              |
+| ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| imageList        | array    | List of images for render. Each item in imageList has some options: - key : generate filename - dataURL : url image or base64 - onUpdate : call function for replace a new image on current position - onRemove : call function for remove current image |
+| onImageUpload    | function | Call for upload new image(s)                                                                                                                                                                                                                             |
+| onImageRemoveAll | function | Call for remove all image(s)                                                                                                                                                                                                                             |
+
 ## License
 
 MIT © [](https://github.com/)

No alert changes

Improved metrics

Total package byte prevSize

69392

increased by3.51%

Dev dependency count

18

decreased by-10%

Number of lines in readme file

76

increased by137.5%

Worsened metrics

Lines of code

390

decreased by-0.26%

No dependency changes