image_compress_crop_preview

Another cool React Component Library

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

Support

License

This project is licensed under the MIT License - see the LICENSE file for details