0.1.2 • Published 5 months ago
react-image-list-box v0.1.2
react-image-list-box
📢 It is a react component where you can list your image files.
Getting Started
Install
npm install react-image-list-boxor
yarn add --save react-image-list-boxWhat 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: ""
},
]