react-image-list-box

📢 It is a react component where you can list your image files.

Getting Started

Install

    npm install react-image-list-box

or

    yarn add --save react-image-list-box

What We Offer?

• List your images
• Drop images from list
• Filter images by name
• Assign tags to your images
• Filter images by assigned tags
• Assign different types to your images (use imageTypes prop)
• Filter images by different types
• Arrange number of images per page
• Arrange image size on list
• Responsive box
• Select All and assign tags to all images
• Adjust colors of component by using Style props
• Click pictures and render a component based on your need

Basic Usage

    import ImageBox from "react-image-list-box";

    const Example = () => {

      const [images, setImages] = React.useState(imagesData)
      const [filteredImages, setFilteredImages] = React.useState(images)
      
      return (
        <ImageBox
          images={images}
          setImages={setImages}
          filteredImages={filteredImages}
          setFilteredImages={setFilteredImages}
          perPage={10}
          imageWidth={200}
          imageHeight={200}
          boxWidth={"auto"}
          boxHeight={"auto"}
        />
      );
    };

Props Usage

Prop	Type	Description
images	Array of Objects	Holds the data for images.
setImages	Function	Function to update the state of images.
filteredImages	Array of Objects	Holds the filtered data for images.
setFilteredImages	Function	Function to update the state of filteredImages.
imageTypes	Array of Objects	Defines the categories of images with names and icons. Each object in the array should have a name (string) and an icon (JSX element).
onSearch	Function	Function called when a search is performed. It should accept a search input string and filter images accordingly.
onClickPage	Function	Function to render a specific page or component when an image is clicked. It accepts parameters showOnClickPage, setShowOnClickPage, and selectedImgObj.
perPage	Number	Number of images to display per page.
imageWidth	Number	Width of each image in pixels.
imageHeight	Number	Height of each image in pixels.
boxWidth	String	Width of the image box container. Can be any valid CSS width value.
boxHeight	String	Height of the image box container. Can be any valid CSS height value.
enableCheckBox	Boolean	Determines whether checkboxes for images are enabled.
enableDelete	Boolean	Determines whether the delete functionality for images is enabled.
enableTagAssignment	Boolean	Determines whether the tag assignment functionality for images is enabled.
selectedImgObj	Object	The currently selected image object.
setSelectedImgObj	Function	Function to update the state of selectedImgObj.
rootStyle	Object	Style object for the root element of the component. Should contain valid CSS properties.
buttonStyle	Object	Style object for buttons in the component.
badgeStyle	Object	Style object for badges in the component.
checkboxStyle	Object	Style object for checkboxes in the component.
inputStyle	Object	Style object for input elements in the component.
dropdownStyle	Object	Style object for dropdown elements in the component.

Images Data Example

    export const imagesData = [
      {
          src: 'https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/advisor/wp-content/uploads/2023/07/top-20-small-dog-breeds.jpeg.jpg',
          filename: '1.jpg',
          categories: [],
          type: "",
          annotations: []
      },
      {
          src: 'https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*',
          filename: '2.jpg',
          categories: [],
          type: "",
          annotations: []
      },
      {
          src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Labrador_Retriever_portrait.jpg/1200px-Labrador_Retriever_portrait.jpg',
          filename: '3.jpg',
          categories: [],
          type: ""
      },
]