image_compress_crop_preview
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
🚀Image Compress Crop Preview Input Component for React using,
browser-image-compression
tinycrop
curtail
react-progressbar
react-particles-js
Install
npm install --save image_compress_crop_preview
Usage
Default Usage
import React from 'react' import Squared from 'image_compress_crop_preview'import 'image_compress_crop_preview/dist/index.css' const App = return <Squared />
Store the Result - Base64
import React useEffect useState from 'react' import Squared from 'image_compress_crop_preview'import 'image_compress_crop_preview/dist/index.css' const App = const Output setOutput = return <div> <Squared =/> </div>
Change the limit of image compression - MB
<Squared = =/> // 100 KB
Customization
<Squared ="https://cactusthemes.com/blog/wp-content/uploads/2018/01/tt_avatar_small.jpg" ="red" ="150px" =/>
## Parameters *All the Parameter are optional 😅*
Parameter | Description | Default Value | Valid Values |
---|---|---|---|
defaultImg | Default image placeholder | Meme Face | Anything that goes within <img src=" " /> |
color | Color of progress bar (loading) | #FFCB2B |
HEX, RGB, Valid Color Names (RED, BLUE, etc...) |
size | Defines the size of the component - Height x Width | 200px | px, em, vh, cm, mm, %, etc... |
setOutput | Output Base64 will be returned as a parameter to this function. | any function. It can also be a console.log 😅 | |
mb | Maximum Size of image after compression | 1 MB | MB |
Support
License
This project is licensed under the MIT License - see the LICENSE file for details