react-multi-image-input

A react component library to ease the step of taking input of images in react.

Screenshots

Installation

npm install react-multi-image-input

Usage

import { ImageInput } from "react-multi-image-input";
import { useState } from "react";

function App() => {
  const [images, setImages] = useState([]);
  return (
    <ImageInput
      width={700}
      height={400}
      images={images}
      setImages={setImage}
      columns={2}
      isCaption={true}
      maxImg={5}
    />
  );
}
export default App;

Development

npm install
npm start

API

props

name	type	default	description
width	Number	(required)	Specifies the width of component in px
height	Number	(required)	Specifies the height of component in px
images		(required)	Stores the input images in json format
setImages		(required)	Set function of useState hooks
columns	Number	1	Specifies the number of images in single row
isCaption	Boolean	false	Specifies weather the caption is required or not
maxImg	Number	1	Specifies the maximum number of images that the input can handle

Output format

- With caption:

[
  { "file": "(file in blob format)", "caption": "..." },
  { "file": "(file in blob format)", "caption": "..." }
]

- Without caption:

[{ "file": "(file in blob format)" }, { "file": "(file in blob format)" }]

Dependencies:

peerDependencies

{ "react": "^18.2.0" }

License

react-multi-image-input is released under the MIT license.