rizkisunaryo/react-image-select-resize

This is a library to select and compress image.

This is a library to select and resize image.

Example

import React, { useState } from 'react'
import ImageSelectResize from 'react-image-select-resize'

const Example = () => {
  const [originalImageUrl, setOriginalImageUrl] = useState(null)
  const [resizedImageUrl, setResizedImageUrl] = useState(null)
  return (
    <div style={{padding: 10}}>
      <ImageSelectResize
        maxWidth={200}
        onImageSelectedUrl={setOriginalImageUrl}
        onImageResizedUrl={setResizedImageUrl}
      >
        <div
          style={{
            border: 'black 1px solid',
            borderRadius: 5,
            padding: 5,
            display: 'table',
            cursor: 'pointer'
          }}
        >
          Select image
        </div>
      </ImageSelectResize>
      <div style={{marginTop: 10}}>Original image:</div>
      {originalImageUrl && <img src={originalImageUrl} style={{maxWidth: '100%'}} />}
      <div style={{marginTop: 10}}>Resized image:</div>
      {resizedImageUrl && <img src={resizedImageUrl} />}
    </div>
  )
}

export default Example

Props

Props	Description
style	Set the container style. Example: style={{borderRadius: 5}}
maxWidth	Set the maximum width. Example: maxWidth={200}
maxHeight	Set the maximum height. Example: maxHeight={200}
onImageSelected	A function with original file as the parameter. Example: onImageSelected={originalFile => console.log(originalFile)}
onImageSelectedUrl	A function with blob URL of original file as the parameter. Example: onImageSelectedUrl={originalFileUrl => setOriginalImageUrl(originalFileUrl)}
onImageResized	A function with resized file as the parameter. Example: onImageResized={resizedFile => console.log(resizedFile)}
onImageResizedUrl	A function with blob URL of resized file as the parameter. Example: onImageResizedUrl={resizedFileUrl => setResizedImageUrl(resizedFileUrl)}