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, default200
) -
containerWidth
Number The width to use for the image. (optional, default200
) -
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, defaulttrue
) -
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>
)
}