chimdie · chimdie · Nov 22, 2021 · Nov 9, 2021 · Nov 9, 2021 · Nov 9, 2021
diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 React package for uploading images.
 
-> Made with create-react-library
-
 [![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)
 
 ## Install
@@ -15,13 +13,25 @@ npm install --save react-image-upload
 ## Usage
 
 ```jsx
-import React from 'react'
-
 import ImageUploader from 'react-image-upload'
 import 'react-image-upload/dist/index.css'
 
 const App = () => {
-  return <ImageUploader />
+  return (
+    <div>
+      {/* example 1 */}
+      <ImageUploader
+        width={300}
+        height={200}
+        background='grey'
+        uploadIcon={'+'}
+        deleteIcon={'-'}
+      />
+
+      {/* example 2 */}
+      <ImageUploader width={300} height={200} background='white' />
+    </div>
+  )
 }
 ```
 

diff --git a/example/src/App.js b/example/src/App.js
@@ -12,13 +12,14 @@ const App = () => {
   }
   return (
     <div className='_dFlex'>
-      {/* example one */}
+      {/* example 1 */}
       <div className='_m4'>
         <ImageUploader
           onFileAdded={(img) => getImageFileObject(img)}
           onFileRemoved={(img) => runAfterImageDelete(img)}
           height={200}
           width={300}
+          background='yellow'
         />
       </div>
 
@@ -27,39 +28,31 @@ const App = () => {
         <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>
+          deleteIcon={<>delete</>}
+          uploadIcon={
+            <svg
+              width='45'
+              height='40'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <path
+                d='M16.423.969c-.828 0-1.642.202-2.355.584a4.446 4.446 0 0 0-1.705 1.592l-1.406 2.304H6.843c-1.667 0-3.265.603-4.444 1.676C1.221 8.2.56 9.655.56 11.173v16.924c0 1.518.662 2.974 1.84 4.047 1.179 1.074 2.777 1.677 4.444 1.677h12.292a12.005 12.005 0 0 1-.827-2.489H6.843c-.942 0-1.845-.34-2.512-.948-.666-.606-1.04-1.43-1.04-2.287V11.173c0-.858.374-1.681 1.04-2.288a3.736 3.736 0 0 1 2.512-.948h5.722l2.186-3.583a1.83 1.83 0 0 1 .702-.656c.294-.157.629-.24.97-.24h7.618c.341 0 .676.083.97.24.294.158.537.384.702.656L27.9 7.937h5.722c.942 0 1.846.341 2.512.948.666.607 1.04 1.43 1.04 2.288v5.525c.964.323 1.88.74 2.733 1.238v-6.763c0-1.518-.663-2.974-1.841-4.048-1.179-1.073-2.777-1.676-4.444-1.676h-4.114l-1.406-2.304a4.446 4.446 0 0 0-1.704-1.592A4.997 4.997 0 0 0 24.04.97h-7.618Z'
+                fill='#F5B73C'
+              />
+              <path
+                d='M20.232 10.924c1.832 0 3.617.524 5.105 1.498 1.488.974 2.602 2.349 3.186 3.93-.89.22-1.747.518-2.558.883a5.446 5.446 0 0 0-1.678-2.39 6.235 6.235 0 0 0-2.767-1.304 6.577 6.577 0 0 0-3.112.133 6.104 6.104 0 0 0-2.62 1.533 5.322 5.322 0 0 0-1.428 2.522 5.008 5.008 0 0 0 .151 2.834 5.451 5.451 0 0 0 1.688 2.385 6.239 6.239 0 0 0 2.771 1.295 11.957 11.957 0 0 0-.721 2.404c-2.093-.441-3.934-1.569-5.173-3.167-1.238-1.599-1.787-3.557-1.542-5.5.245-1.945 1.267-3.738 2.871-5.04 1.604-1.3 3.678-2.019 5.827-2.016Z'
+                fill='#F5B73C'
+              />
+              <path
+                d='M44.276 28.843c0 6.048-5.383 10.95-12.023 10.95S20.23 34.892 20.23 28.844c0-6.047 5.383-10.95 12.023-10.95s12.023 4.902 12.023 10.95Zm-10.93-5.973a.953.953 0 0 0-.32-.704 1.15 1.15 0 0 0-.773-.291c-.29 0-.568.105-.773.291a.953.953 0 0 0-.32.704v4.978h-5.465c-.29 0-.568.105-.773.291a.953.953 0 0 0-.32.704c0 .264.116.517.32.704.205.187.483.292.773.292h5.465v4.977c0 .264.115.518.32.704.205.187.483.292.773.292.29 0 .568-.105.773-.292a.953.953 0 0 0 .32-.704V29.84h5.465c.29 0 .568-.105.773-.292a.953.953 0 0 0 .32-.704.953.953 0 0 0-.32-.704 1.15 1.15 0 0 0-.773-.291h-5.465V22.87Z'
+                fill='#F5B73C'
+              />
+            </svg>
           }
         />
       </div>
+      <ImageUploader width={300} height={200} background='inherit' />
     </div>
   )
 }

diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,16 @@
-/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
-import React, { useState, useRef } from 'react'
+import React, { useState } from 'react'
 import styles from './styles.module.css'
 
 const ImageUploader = ({
   onFileAdded,
   onFileRemoved,
-  uploadElement,
+  uploadIcon,
+  deleteIcon,
   height,
   width,
   background
 }) => {
-  const ref = useRef()
   const [currentImg, setCurrentImg] = useState({})
 
   const handleImageUpload = (e) => {
@@ -27,10 +26,9 @@ const ImageUploader = ({
     }
   }
 
-  const handleDeleteImage = () => {
+  const handleDeleteImage = (e) => {
     if (onFileRemoved) onFileRemoved(currentImg)
-    ref.current.files = null
-    ref.current.value = ''
+    e.target.value = ''
     setCurrentImg({})
   }
   return (
@@ -42,27 +40,18 @@ const ImageUploader = ({
       >
         <div className={styles.__btnWrapper}>
           <button className={styles.__btn} onClick={handleDeleteImage}>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              width='20'
-              height='20'
-              viewBox='0 0 24 24'
-              fill='#848484'
-            >
-              <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' />
-            </svg>
+            <DeleteIcon icon={deleteIcon} />
           </button>
         </div>
 
         {/* upload Input Box */}
         <label className={styles.__label}>
-          <UploadElement element={uploadElement} />
+          <UploadIcon icon={uploadIcon} />
           {currentImg.dataUrl ? (
             <React.Fragment />
           ) : (
             <input
               key={currentImg}
-              ref={ref}
               type='file'
               name='upload'
               className={styles.__input}
@@ -72,7 +61,8 @@ const ImageUploader = ({
             />
           )}
         </label>
-        {/* image */}
+
+        {/* uploaded image */}
         {currentImg.dataUrl ? (
           <img
             className={styles.__img}
@@ -88,9 +78,9 @@ const ImageUploader = ({
   )
 }
 
-function UploadElement({ element }) {
-  if (element) {
-    return <React.Fragment>{element}</React.Fragment>
+function UploadIcon({ icon }) {
+  if (icon) {
+    return <React.Fragment>{icon}</React.Fragment>
   }
   return (
     <svg
@@ -108,4 +98,21 @@ function UploadElement({ element }) {
   )
 }
 
+function DeleteIcon({ icon }) {
+  if (icon) {
+    return <React.Fragment>{icon}</React.Fragment>
+  }
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='#848484'
+    >
+      <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' />
+    </svg>
+  )
+}
+
 export default ImageUploader