image-upload-react

react image picker

Demo

Install

npm install --save image-upload-react

Usage

import React, { useState } from 'react'
import ImageUpload from 'image-upload-react'
//important for getting nice style.
import 'image-upload-react/dist/index.css'

function App() {
  const [imageSrc, setImageSrc] = useState()

  const handleImageSelect = (e) => {
    setImageSrc(URL.createObjectURL(e.target.files[0]))
  }

  return (
    <ImageUpload
      handleImageSelect={handleImageSelect}
      imageSrc={imageSrc}
      setImageSrc={setImageSrc}
      style={{
        width: 700,
        height: 500,
        background: 'gold'
      }}
    />
  )
}

export default App

Docs

| Property | Description | Required | | ----------------- | ----------------------------------------------------------------------------------------------------------- | -------- | | handleImageSelect | function that will get fired when the user pick an image and we will update the state with the piacked file | true | | imageSrc | peace of state to keep track of the slected file | true | | setImageSrc | function that will update the value in the state | true | | style | style object to style the parent div for the ImageUpload component | false |

License

MIT © Abd-Alwahab