Miss any of our Open RFC calls?Watch the recordings here! »

@alexseitsinger/previewable-image

0.1.1 • Public • Published

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>
  )
}

Keywords

none

Install

npm i @alexseitsinger/previewable-image

DownloadsWeekly Downloads

0

Version

0.1.1

License

BSD-2-Clause

Unpacked Size

39.6 kB

Total Files

5

Last publish

Collaborators

  • avatar