You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-image-grid-gallery

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-image-grid-gallery - npm Package Compare versions

Comparing version

to
0.9.0

2

package.json
{
"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.
![npm](https://img.shields.io/npm/v/react-image-grid-gallery) ![NPM](https://img.shields.io/npm/l/react-image-grid-gallery)
## 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>