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 😅).
browser-image-compression
tinycrop
curtail
react-progressbar
react-particles-js
npm install --save image_compress_crop_preview
import React from 'react'
import { Squared } from 'image_compress_crop_preview'
import 'image_compress_crop_preview/dist/index.css'
const App = () => {
return <Squared />
}
export default App
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] = useState()
useEffect(() => {
console.log(Output)
}, [Output])
return (
<div>
<Squared setOutput={setOutput}/>
</div>
)
}
export default App
<Squared setOutput={setOutput} mb={0.1}/> // 100 KB
<Squared
defaultImg="https://cactusthemes.com/blog/wp-content/uploads/2018/01/tt_avatar_small.jpg"
color="red"
size="150px"
setOutput={setOutput}
/>
## Parameters *All the Parameter are optional 😅*
This project is licensed under the MIT License - see the LICENSE file for details