Make react image upload component easier with react-images-uploading and your UI

Hello everyone. Like the title I named above, this is a post I want to introduce my first public React component on Npm. I hope it will save your time because it saves my time (but after I take the time to try to write it lol).

Introduction

React-images-uploading is a react component with just logic code helping select image(s) to show on UI and preparing to upload. Just logic code means no UI, no CSS and depends on your UI.

Here is my rash demo: https://codesandbox.io/s/react-images-uploading-demo-u0khz

This module was born for resolving my working task absolutely. Before I code it I have researched some image upload components, and realize that almost all have logic and UI already. It is good if you just make a baby project for fun and do not (or a little bit) care about the UI. But in my working, I have to refer to the design, and other components force me to override CSS. So I make my module as abstract as possible.

Using

To install :

npm install --save react-images-uploading

or

yarn add react-images-uploading

Because I want to make a module like “my-logic-your-css” so I choose Child function rendering pattern. You have to follow the example for using:

<ImageUploading mode="multiple" onChange={onChange}>
   {({ imageList, onImageUpload, onImageRemoveAll }) => (
      // write your UI here
   )}
</ImageUploading>

I have exported an array imageList that use for render. Two functions, onImageUpload and onImageRemoveAll for action click upload and remove all images.

Besides there are some built-in functions in each item in imageList : item.onUpdate for replacing by a new image, item.onRemove for removing this image.

About other props you can follow here : https://github.com/vutoan266/React-images-uploading

Conclusion

React-images-uploading is still improves day by day. I will make it support some cases like size image, type of image, resolution…

I am very willing if you have any questions, ideas or pull requests for this module.

Thank you for reading. See you next post.