Masonry Image
Demo
Props
| Prop | Type | Description |
|---|---|---|
children | { [key: string]: any; src: string; alt: string }[] | The array of image objects to be displayed, each with a source and alt text. |
breakpointCols | { [key: number]: number; } | Configuration for the number of columns based on viewport width. |
lightBox | boolean (optional) | If true, enables Lightbox functionality for images. |
photoItem | (item: { [key: string]: any; src: string; alt: string }, index: number) => React.ReactNode (optional) | Custom render function for each image. |
loadSize | number (optional) | The size to load images at, used for width and height. |
aspectRatio | number (optional) | The aspect ratio for images. |
classNames | { masonry?: string; column?: string; image?: string; lightBox?: string } (optional) | Custom class names for the masonry grid, columns, images, and Lightbox. |
Breakpoint Columns Object
This prop allows for defining the number of columns at specific viewport widths. It accepts either a single number for a fixed number of columns or an object with keys as viewport widths and values as the number of columns.
default: Default number of columns.- Breakpoints (e.g.,
1100,700,500): Number of columns for specific viewport widths.
Styles
This component allows for custom styles via the classNames prop:
masonry: CSS class for styling the overall Masonry grid.column: CSS class for styling individual columns within the Masonry grid.image: CSS class for styling individual images.lightBox: CSS class for styling the Lightbox component, if enabled.