npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-image-gallerie

v1.1.0

Published

React carousel image gallery component with thumbnail and mobile support

Downloads

104

Readme

React Image Gallery

npm version Download Count Bundle size

Live Demo (try it on mobile for swipe support)

linxtion.com/demo/react-image-gallery

demo gif

React image gallery is a React component for building image galleries and carousels

Features

  • Mobile swipe gestures
  • Thumbnail navigation
  • Fullscreen support
  • Custom rendered slides
  • RTL support
  • Responsive design
  • Tons of customization options (see props below)

Getting started

React Image Gallery requires React 16.0.0 or later.

npm install react-image-gallery

Style import (with webpack)

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

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

Example

Need more example? See example/app.js

import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];

class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

Props

  • items: (required) Array of objects, see example above,

    • Available Properties
      • original - image src url
      • thumbnail - image thumbnail src url
      • fullscreen - image for fullscreen (defaults to original)
      • originalHeight - image height (html5 attribute)
      • originalWidth - image width (html5 attribute)
      • loading - image loading. Either "lazy" or "eager" (html5 attribute)
      • thumbnailHeight - image height (html5 attribute)
      • thumbnailWidth - image width (html5 attribute)
      • thumbnailLoading - image loading. Either "lazy" or "eager" (html5 attribute)
      • originalClass - custom image class
      • thumbnailClass - custom thumbnail class
      • renderItem - Function for custom rendering a specific slide (see renderItem below)
      • renderThumbInner - Function for custom thumbnail renderer (see renderThumbInner below)
      • originalAlt - image alt
      • thumbnailAlt - thumbnail image alt
      • originalTitle - image title
      • thumbnailTitle - thumbnail image title
      • thumbnailLabel - label for thumbnail
      • description - description for image
      • srcSet - image srcset (html5 attribute)
      • sizes - image sizes (html5 attribute)
      • bulletClass - extra class for the bullet of the item
      • bulletOnClick - callback({item, itemIndex, currentIndex})
        • A function that will be called upon bullet click.
  • infinite: Boolean, default true

    • infinite sliding
  • lazyLoad: Boolean, default false

  • showNav: Boolean, default true

  • showThumbnails: Boolean, default true

  • thumbnailPosition: String, default bottom

    • available positions: top, right, bottom, left
  • showFullscreenButton: Boolean, default true

  • useBrowserFullscreen: Boolean, default true

    • if false, fullscreen will be done via css within the browser
  • useTranslate3D: Boolean, default true

    • if false, will use translate instead of translate3d css property to transition slides
  • showPlayButton: Boolean, default true

  • isRTL: Boolean, default false

    • if true, gallery's direction will be from right-to-left (to support right-to-left languages)
  • showBullets: Boolean, default false

  • showIndex: Boolean, default false

  • autoPlay: Boolean, default false

  • disableThumbnailScroll: Boolean, default false

    • disables the thumbnail container from adjusting
  • disableKeyDown: Boolean, default false

    • disables keydown listener for keyboard shortcuts (left arrow, right arrow, esc key)
  • disableSwipe: Boolean, default false

  • disableThumbnailSwipe: Boolean, default false

  • onErrorImageURL: String, default undefined

    • an image src pointing to your default image if an image fails to load
    • handles both slide image, and thumbnail image
  • indexSeparator: String, default ' / ', ignored if showIndex is false

  • slideDuration: Number, default 450

    • transition duration during image slide in milliseconds
  • swipingTransitionDuration: Number, default 0

    • transition duration while swiping in milliseconds
  • slideInterval: Number, default 3000

  • slideOnThumbnailOver: Boolean, default false

  • flickThreshold: Number (float), default 0.4

    • Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive)
  • swipeThreshold: Number, default 30

    • A percentage of how far the offset of the current slide is swiped to trigger a slide event. e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
  • stopPropagation: Boolean, default false

    • Automatically calls stopPropagation on all 'swipe' events.
  • startIndex: Number, default 0

  • onImageError: Function, callback(event)

    • overrides onErrorImage
  • onThumbnailError: Function, callback(event)

    • overrides onErrorImage
  • onThumbnailClick: Function, callback(event, index)

  • onImageLoad: Function, callback(event)

  • onSlide: Function, callback(currentIndex)

  • onBeforeSlide: Function, callback(nextIndex)

  • onScreenChange: Function, callback(boolean)

    • When fullscreen is toggled a boolean is passed to the callback
  • onPause: Function, callback(currentIndex)

  • onPlay: Function, callback(currentIndex)

  • onClick: Function, callback(event)

  • onTouchMove: Function, callback(event) on gallery slide

  • onTouchEnd: Function, callback(event) on gallery slide

  • onTouchStart: Function, callback(event) on gallery slide

  • onMouseOver: Function, callback(event) on gallery slide

  • onMouseLeave: Function, callback(event) on gallery slide

  • additionalClass: String,

    • Additional class that will be added to the root node of the component.
  • renderCustomControls: Function, custom controls rendering

    • Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)
      _renderCustomControls() {
        return <a href='' className='image-gallery-custom-action' onClick={this._customAction.bind(this)}/>
      }
  • renderItem: Function, custom item rendering

    • NOTE: Highly suggest looking into a render cache such as React.memo if you plan to override renderItem
    • On a specific item [{thumbnail: '...', renderItem: this.myRenderItem}]
    • As a prop passed into ImageGallery to completely override renderItem, see source for renderItem implementation
  • renderThumbInner: Function, custom thumbnail rendering

    • On a specific item [{thumbnail: '...', renderThumbInner: this.myRenderThumbInner}]
    • As a prop passed into ImageGallery to completely override _renderThumbInner, see source for reference
  • renderLeftNav: Function, custom left nav component

    • See <LeftNav />
    • Use this to render a custom left nav control
    • Args:
      • onClick callback that will slide to the previous item
      • disabled boolean for when the nav is disabled
      renderLeftNav: (onClick, disabled) => (
        <LeftNav onClick={onClick} disabled={disabled} />
      )
  • renderRightNav: Function, custom right nav component

    • See <RightNav />
    • Use this to render a custom right nav control
    • Args:
      • onClick callback that will slide to the next item
      • disabled boolean for when the nav is disabled
      renderRightNav: (onClick, disabled) => (
        <RightNav onClick={onClick} disabled={disabled} />
      )
  • renderPlayPauseButton: Function, play pause button component

    • See <PlayPause />
    • Use this to render a custom play pause button
    • Args:
      • onClick callback that will toggle play/pause
      • isPlaying boolean for when gallery is playing
      renderPlayPauseButton: (onClick, isPlaying) => (
        <PlayPause onClick={onClick} isPlaying={isPlaying} />
      )
  • renderFullscreenButton: Function, custom fullscreen button component

    • See <Fullscreen />
    • Use this to render a custom fullscreen button
    • Args:
      • onClick callback that will toggle fullscreen
      • isFullscreen argument for when fullscreen is active
      renderFullscreenButton: (onClick, isFullscreen) => (
        <Fullscreen onClick={onClick} isFullscreen={isFullscreen} />
      ),
  • useWindowKeyDown: Boolean, default true

    • If true, listens to keydown events on window (window.addEventListener)
    • If false, listens to keydown events on image gallery element (imageGalleryElement.addEventListener)

Functions

The following functions can be accessed using refs

  • play(): plays the slides
  • pause(): pauses the slides
  • fullScreen(): activates full screen
  • exitFullScreen(): deactivates full screen
  • slideToIndex(index): slides to a specific index
  • getCurrentIndex(): returns the current index

Contributing

Each PR should be specific and isolated to the issue you're trying to fix. Please do not stack features/chores/refactors/enhancements in one PR. Describe your feature/implementation in the PR. If you're unsure its useful or if it is a major change, please open an issue first and get feedback.

  • Follow eslint provided
  • Comment your code
  • Write clean code

Build the example locally (requires node >= 12.13)

git clone https://github.com/xiaolin/react-image-gallery.git
cd react-image-gallery
npm install --global yarn
yarn install
yarn start

Then open localhost:8001 in a browser.

License

MIT