Image_compress_crop_preview NPM

image_compress_crop_preview

Another cool React Component Library

🚀 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}
/>

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