1.0.3 • Published 6 years ago

@rizkisunaryo/react-image-select-resize v1.0.3

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

This is a library to select and resize image.

ezgif-2-679c697523f6

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

PropsDescription
styleSet the container style. Example: style={{borderRadius: 5}}
maxWidthSet the maximum width. Example: maxWidth={200}
maxHeightSet the maximum height. Example: maxHeight={200}
onImageSelectedA function with original file as the parameter. Example: onImageSelected={originalFile => console.log(originalFile)}
onImageSelectedUrlA function with blob URL of original file as the parameter. Example: onImageSelectedUrl={originalFileUrl => setOriginalImageUrl(originalFileUrl)}
onImageResizedA function with resized file as the parameter. Example: onImageResized={resizedFile => console.log(resizedFile)}
onImageResizedUrlA function with blob URL of resized file as the parameter. Example: onImageResizedUrl={resizedFileUrl => setResizedImageUrl(resizedFileUrl)}
1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago