react-img-prev

react-img-prev

A react image picker with preview

It let you pick files from your computer and display only the first one.

Install :

npm install react-img-prev

How to use it :

import ReactImgPrev from "react-img-prev";

const Component = () => {

  const [files, setFiles] = useState({});

  return (
    <ReactImgPrev files={files.files} setFiles={setFiles} />
  )}

If you want to display your own placeholder in place of the default icon, you can pass it as a children.

import ReactImgPrev from "react-img-prev";

const Component = () => {

  const [files, setFiles] = useState({});

  return (
    <ReactImgPrev files={files.files} setFiles={setFiles} >
      <h1>Image</h1>
    </ReactImgPrev>
  )}

You can pass additional options.

Accepted props :

Props	Type	Optional ?	Description
width	Number	yes	width of the display preview
height	Number	yes	height of the display preview
className	string	yes	class of the preview
accept	string	yes	type accepted for input
max	string	yes	max number of file
files	File	no	files selected
setFiles	Function	no	set selected files

License

Under the MIT license.