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

!Demo

#### Image Compress Crop Preview Input Component for React using,
browser-image-compression tinycrop curtail react-progressbar react-particles-js

Install

``bash
npm install --save image_compress_crop_preview
`

Usage

!Demo

#### Default Usage
`jsx
import React from 'react'

import { Squared } from 'image_compress_crop_preview'
import 'image_compress_crop_preview/dist/index.css'

const App = () => {
return
}
export default App

`

#### Store the Result - Base64
`jsx
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 (


`

#### Change the limit of image compression - MB
`jsx
// 100 KB

`

#### Customization
`jsx
defaultImg="https://cactusthemes.com/blog/wp-content/uploads/2018/01/tt_avatar_small.jpg"
color="red"
size="150px"
setOutput={setOutput}
/>

`




Parameters