@alexseitsinger/previewable-image

PreviewableImage

Extends React.Component

A file input that automatically displays the image file its given.

Parameters

• name String The name of the file input (optional, default "image")
• onLoaded Function The function to invoke when the file is loaded by the browser (optional, default ()=>{})
• containerClassName String The classname to use for the container element. (optional, default "PreviewableImage")
• containerHeight Number The height to use for the image. (optional, default 200)
• containerWidth Number The width to use for the image. (optional, default 200)
• alt String The alternative string to use for the image. (optional, default "")
• initialImage String The path to an image to display before anything is loaded. (optional, default "")
• fallbackImage String The path to an image to display as a fallback. (optional, default "")
• withResetButton Boolean Whether or not to use a reset button when the image preview is displayed. (optional, default true)
• resetButtonStyle Object The style to apply to the reset button. (optional, default {})
• resetButtonBody (Object | String) The node to render inside the reset button. (optional, default "reset")

Examples

import React from "react"
import PreviewableImage from "@alexseitsinger/previewable-image"

function ExampleComponent({ onCompleted }){
  return (
  	 <Form
  	   onSubmit={(event) => {
  	     event.preventDefault()
  	     event.stopPropagation()
  	     const form = event.target
  	     const imageField = form.querySelector("input[name=image]")
  	     onCompleted(imageField.files[0])
  	   }}>
      <PreviewableImage/>
      <SubmitButton>
        Submit
      </SubmitButton>
    </Form>
  )
}