react-img-input

         

Another cool React Component Library

This Library is a simply a input tag. It takes the input file compresses it, crop it and returns the Base64 of the input image. Almost all projects need such functionality that allows user to select, compress, crop and preview the images before uploding it. This Library is a timesaver (sometimes lifesaver 😅).

🚀 See it in Action

Install

npm install --save react-img-input

Usage

Default Usage

import React from 'react'

import { ReactImgInput } from 'react-img-input'
import 'react-img-input/dist/index.css'

const config = {
  size: 120,
  captureBtn: {
    bg: 'crimson',
    color: '#fff',
  },
  cropBtn: {
    bg: '#F4B230',
    color: '#fff',
  },
  defaultImg: '',
  theme: 'light',
  compression: {
    maxSizeMB: 0.1,
    maxWidthOrHeight: 500,
    useWebWorker: true,
  }
}

const App = () => {
  return <ReactImgInput config={config} setOutput={console.log} />
}
export default App

Parameter		Description	Default Value	Valid Values
captureBtn	bg	Background color for the button with + icon	#3498DB	Any color
	color	Text color for the button with + icon	#FFF	Any color
cropBtn	bg	Background color for the button with + icon	#F4B230	Any color
	color	Text color for the button with crosschair icon	#FFF	Any color
size		Size of the preview image	150px	All the units
defaultImg		Placeholder image for preview		dataURL(base64), foreign link, Anything that goes within <img `src=" "`>
theme		Theme dark/light	light	dark / light
Parameters for browser-image-compression
compression	maxSizeMB	Maximum size of the image after compression.	0.1	Number
	maxWidthOrHeight	compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight.	1000	Number
	onProgress	A function takes one progress argument.		percentage from 0 to 100
	useWebWorker	Use multi-thread web worker, fallback to run in main-thread,	true	true / false
	maxIteration	Max number of iteration to compress the image.	10	Number
	exifOrientation	see https://stackoverflow.com/a/32490603/10395024.		Number
	fileType	FileType override.		image/png, image/jpeg, image/jpg
	initialQuality	Initial quality value.	1	between 0 and 1

Support

License

This project is licensed under the MIT License - see the LICENSE file for details