README

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

npm install --save image_compress_crop_preview

Usage

Demo

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 />
}
export default App

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] = useState()
  
  useEffect(() => {
    console.log(Output)
  }, [Output])

  return (
    <div>
      <Squared setOutput={setOutput}/>
    </div>
  )
}
export default App

Change the limit of image compression - MB

<Squared setOutput={setOutput} mb={0.1}/>   // 100 KB

Customization

<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 😅*

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

Usage no npm install needed!