Security News
Bun 1.2 Released with 90% Node.js Compatibility and Built-in S3 Object Support
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
react-image-gallery
Advanced tools
react-image-gallery is a flexible and customizable image gallery component for React applications. It allows developers to create responsive and interactive image galleries with features like slide shows, thumbnails, and full-screen mode.
Basic Image Gallery
This code sample demonstrates how to create a basic image gallery using react-image-gallery. The gallery displays a series of images with corresponding thumbnails.
import React from 'react';
import ImageGallery from 'react-image-gallery';
const images = [
{
original: 'https://example.com/image1.jpg',
thumbnail: 'https://example.com/thumb1.jpg',
},
{
original: 'https://example.com/image2.jpg',
thumbnail: 'https://example.com/thumb2.jpg',
},
{
original: 'https://example.com/image3.jpg',
thumbnail: 'https://example.com/thumb3.jpg',
},
];
const MyGallery = () => (
<ImageGallery items={images} />
);
export default MyGallery;
Auto Play Slide Show
This code sample shows how to enable the auto-play feature in the image gallery. The gallery will automatically cycle through the images.
import React from 'react';
import ImageGallery from 'react-image-gallery';
const images = [
{
original: 'https://example.com/image1.jpg',
thumbnail: 'https://example.com/thumb1.jpg',
},
{
original: 'https://example.com/image2.jpg',
thumbnail: 'https://example.com/thumb2.jpg',
},
{
original: 'https://example.com/image3.jpg',
thumbnail: 'https://example.com/thumb3.jpg',
},
];
const MyGallery = () => (
<ImageGallery items={images} autoPlay={true} />
);
export default MyGallery;
Full-Screen Mode
This code sample demonstrates how to enable the full-screen mode in the image gallery. Users can view images in full-screen by clicking the full-screen button.
import React from 'react';
import ImageGallery from 'react-image-gallery';
const images = [
{
original: 'https://example.com/image1.jpg',
thumbnail: 'https://example.com/thumb1.jpg',
},
{
original: 'https://example.com/image2.jpg',
thumbnail: 'https://example.com/thumb2.jpg',
},
{
original: 'https://example.com/image3.jpg',
thumbnail: 'https://example.com/thumb3.jpg',
},
];
const MyGallery = () => (
<ImageGallery items={images} showFullscreenButton={true} />
);
export default MyGallery;
react-photo-gallery is a React component for creating responsive image galleries. It offers a more grid-based layout compared to react-image-gallery and is optimized for performance with features like lazy loading.
react-images is a lightbox component for displaying images in a modal. It focuses on providing a simple and customizable lightbox experience, whereas react-image-gallery offers a more comprehensive gallery solution.
react-slick is a carousel component for React. It is highly customizable and supports various types of content, not just images. It is more versatile in terms of content types compared to react-image-gallery.
React Immage Gallery
FAQs
React carousel image gallery component with thumbnail and mobile support
We found that react-image-gallery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.