React image Gallery for React Projects

You can add a gallery for your react project with react-image-gallery.React image gallery is a React component for building image galleries and carousels

It has many features such as

• Mobile swipe gestures
• Thumbnail navigation
• Fullscreen support
• Custom rendered slides
• RTL support
• Responsive design

To add the package use below command in your project path

npm install react-image-gallery

Then imports styles

# SCSS
@import "~react-image-gallery/styles/scss/image-gallery.scss";

# CSS
@import "~react-image-gallery/styles/css/image-gallery.css";

Exapmle

import ImageGallery from 'react-image-gallery';
 
const images = [
  {
    original: '' //Add Links to images,
    thumbnail: '' //Add Links to images,
  },
  {
    original: ''//Add Links to images,
    thumbnail: ''//Add Links to images,
  },
 
];
 
class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

To more information visit here https://www.npmjs.com/package/react-image-gallery#features

Thank you and see you soon again!!