react-image-grid-gallery
Advanced tools
Comparing version
{ | ||
"name": "react-image-grid-gallery", | ||
"version": "0.8.0", | ||
"version": "0.9.0", | ||
"description": "A simple image gallery component for displaying a grid of images in React apps", | ||
@@ -5,0 +5,0 @@ "main": "ImageGallery.js", |
# React Image Grid Gallery | ||
It's here! A simple, easy-to-use, and responsive image gallery component for displaying a grid of images in React apps. | ||
A simple, easy-to-use, and responsive image gallery component for displaying a grid of images in React apps. | ||
  | ||
## Installation | ||
@@ -19,2 +21,8 @@ | ||
Using pnpm: | ||
``` | ||
pnpm add react-image-grid-gallery | ||
``` | ||
## Usage | ||
@@ -44,3 +52,3 @@ | ||
function App() { | ||
return <ImageGallery imgArray={imagesArray} />; | ||
return <ImageGallery imgArray={imagesArray} columnWidth={300} gapSize={7} />; | ||
} | ||
@@ -51,8 +59,43 @@ ``` | ||
### `imgArray` | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Props</th> | ||
<th>Description</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td><code>imgArray</code></td> | ||
<td> | ||
The `imgArray` props is an array of objects containing the following properties: | ||
Required. The `imgArray` prop is an array of objects containing the following properties: | ||
- `alt`: The image's [alternative text](https://webaim.org/techniques/alttext/). This property is required. | ||
- `caption`: A [description of the image](https://www.studysmarter.co.uk/explanations/english/blog/image-caption/). This property is optional. | ||
- `src`: The [URL](https://codesweetly.com/web-address-url) of the image. This property is required. | ||
- `alt`: Required. The image's [alternative text](https://webaim.org/techniques/alttext/). | ||
- `caption`: Optional. A [description of the image](https://www.studysmarter.co.uk/explanations/english/blog/image-caption/). | ||
- `src`: Required. The [URL](https://codesweetly.com/web-address-url) of the image. | ||
</td> | ||
</tr> | ||
<tr> | ||
<td><code>columnWidth</code></td> | ||
<td> | ||
Optional. The `columnWidth` prop is a number specifying the minimum width of the gallery's columns. | ||
`230` is the default value. | ||
</td> | ||
</tr> | ||
<tr> | ||
<td><code>gapSize</code></td> | ||
<td> | ||
Optional. The `gapSize` prop is a number specifying the gallery [gap's size](https://codesweetly.com/css-gap-property). | ||
`24` is the default value. | ||
</td> | ||
</tr> | ||
</tbody> | ||
</table> |
8665
9.16%99
76.79%