react-image-grid-gallery

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.

Installation

Using npm:

npm install react-image-grid-gallery

Using yarn:

yarn add react-image-grid-gallery

Usage

import ImageGallery from "react-image-grid-gallery";

const imagesArray = [
  {
    alt: "Image1's alt text",
    caption: "Image1's description",
    src: "http://example.com/image1.jpg",
  },
  {
    alt: "Image2's alt text",
    caption: "Image2's description",
    src: "http://example.com/image2.png",
  },
  {
    alt: "Image3's alt text",
    caption: "Image3's description",
    src: "http://example.com/image3.webp",
  },
];

function App() {
  return <ImageGallery imgArray={imagesArray} />;
}

Required Props

imgArray

The imgArray props is an array of objects containing the following properties:

• alt: The image's alternative text. This property is required.
• caption: A description of the image. This property is optional.
• src: The URL of the image. This property is required.

Changelog

0.8.0 (2023-05-29)

🚀 New Feature

• ImageGallery: Create ImageGallery component (49c40a9)

🔄️ Code Refactoring

• Don't render <figcaption> if item.caption is undefined (1c0c59e)
• Make caption optional (c47d824)
• Rename 'ImgArryProps' to 'ImgArrayType' (8062f6c)

💅 Styling and Formatting

• Add 'codesweetly-rigg' to class names (4e12857)
• Add row-gap (4a5b2d8)
• Create ImageGallery's stylesheet (70191bc)
• Define codesweetly-img's width (ca01ba6)
• Delete 'data-theme=light' declaration (d578205)
• Delete the 'codesweetly-rigg-img' class (c87e621)

📝 Documentation

• Create README (bc64b22)

🏠 Chores

• Change version number to 0.0.0 (24da08f)
• commitlint: Install plugins to enforce Conventional Commits (9170395)
• Configure babel (1d21977)
• Configure TypeScript (9604bb9)
• Create 'copy-files' script (da952a0)
• Create a LICENSE (13c70f0)
• Generate changelog (e2e920a)
• github: Configure release-it to auto-generate project's GitHub releases (7312f92)
• github: Specify the remote repo's url (d800de3)
• Ignore 'dist' folder (12ae8a5)
• Ignore npm-debug.log* (aafe117)
• ImageGallery: Define ImgArryProps interface (c6f04e1)
• Initialize react-image-grid-gallery project (bd11d5f)
• Make 'ImageGallery.js' the entry point (14451d6)
• package-json: Install packages for compiling React to JavaScript (56cd72d)
• Provide info that helps people discover the package (bf581de)
• release-it: Customize changelog's headings (00943c8)
• release-it: Install version management plugin (abfc611)
• release-it: Let release-it auto-generate project's changelog (8f12b98)
• release-it: Specify options to override (bf58eee)
• release-it: Use plugin to provide recommended bump to release-it (ebd37a4)
• Scope package under '@codesweetly/' (5edc417)
• typescript: Define declaration file's location (589842f)
• Update changelog sections (8763812)
• Update to v0.2.0 (6cce00e)
• Update to v0.3.0 (7156836)
• Update to v0.4.0 (df9a6f9)
• Update to v0.5.0 (81acd21)

🐛 Bug Fix

• release-it: Change 'publishPath' to './dist' (6edded2)
• Update dist's package.json file (91261f1)