Cannot Read Property 'getcurrentindex' of Undefined Redux Js

React Carousel Image Gallery

Live Demo (endeavor it on mobile for swipe support)

linxtion.com/demo/react-image-gallery

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 pattern
• Tons of customization options (meet props below)
• Lightweight ~7kb gzipped

Getting started

React Paradigm Gallery requires React sixteen.0.0 or later.

            npm install react-epitome-gallery                      

Style import (with webpack)

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

Example

Need more case? Encounter case/app.js

              import              ImageGallery              from              'react-paradigm-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/chiliad/600/'              ,              thumbnail:              'https://picsum.photos/id/1015/250/150/'              ,              }              ,              {              original:              'https://picsum.photos/id/1019/m/600/'              ,              thumbnail:              'https://picsum.photos/id/1019/250/150/'              ,              }              ,              ]              ;              grade              MyGallery              extends              React              .              Component              {              render              (              )              {              return              <              ImageGallery              items              =              {              images              }              />              ;              }              }            

Props

• items: (required) Assortment of objects, see example to a higher place,

  • Available Properties
    • original - image src url
    • thumbnail - image thumbnail src url
    • fullscreen - image for fullscreen (defaults to original)
    • elevation - image elevation (html5 attribute)
    • width - image width (html5 attribute)
    • originalClass - custom paradigm course
    • thumbnailClass - custom thumbnail class
    • renderItem - Part for custom renderer (see renderItem below)
    • renderThumbInner - Function for custom thumbnail renderer (run across renderThumbInner below)
    • originalAlt - image alt
    • thumbnailAlt - thumbnail image alt
    • originalTitle - image title
    • thumbnailTitle - thumbnail epitome championship
    • thumbnailLabel - label for thumbnail
    • clarification - description for image
    • imageSet - array of <source> using <picture> element (see app.js for instance)
    • srcSet - epitome srcset (html5 attribute)
    • sizes - image sizes (html5 attribute)
    • bulletClass - extra class for the bullet of the particular
    • bulletOnClick - callback({item, itemIndex, currentIndex})
      • A function that will be called upon bullet click.

• infinite: Boolean, default truthful

  • space sliding

• lazyLoad: Boolean, default faux

• showNav: Boolean, default true

• showThumbnails: Boolean, default truthful

• thumbnailPosition: Cord, default bottom

  • available positions: top, correct, lesser, left

• showFullscreenButton: Boolean, default true

• useBrowserFullscreen: Boolean, default true

  • if faux, fullscreen will exist washed via css inside the browser

• useTranslate3D: Boolean, default true

  • if false, will use interpret instead of translate3d css holding to transition slides

• showPlayButton: Boolean, default true

• isRTL: Boolean, default simulated

  • if truthful, gallery's management will exist from right-to-left (to support correct-to-left languages)

• showBullets: Boolean, default false

• showIndex: Boolean, default false

• autoPlay: Boolean, default imitation

• disableThumbnailScroll: Boolean, default false

  • disables the thumbnail container from adjusting

• disableKeyDown: Boolean, default faux

  • disables keydown listener for keyboard shortcuts (left pointer, right arrow, esc key)

• disableSwipe: Boolean, default false

• onErrorImageURL: Cord, default undefined

  • an image src pointing to your default image if an image fails to load
  • handles both slide epitome, and thumbnail image

• indexSeparator: String, default ' / ', ignored if showIndex is imitation

• 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 earlier it'due south considered a flick (lower = more sensitive)

• swipeThreshold: Number, default 30

  • A pct of how far the offset of the electric 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 volition non trigger a slide issue.

• stopPropagation: Boolean, default false

  • Automatically calls stopPropagation on all 'swipe' events.

• preventDefaultTouchmoveEvent: Boolean, default false

  • An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)

• startIndex: Number, default 0

• onImageError: Office, callback(event)

  • overrides onErrorImage

• onThumbnailError: Function, callback(event)

  • overrides onErrorImage

• onThumbnailClick: Function, callback(event, index)

• onImageLoad: Role, callback(event)

• onSlide: Function, callback(currentIndex)

• onBeforeSlide: Function, callback(nextIndex)

• onScreenChange: Office, callback(boolean)

  • When fullscreen is toggled a boolean is passed to the callback

• onPause: Function, callback(currentIndex)

• onPlay: Function, callback(currentIndex)

• onClick: Office, callback(outcome)

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

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

• onTouchStart: Office, callback(issue) on gallery slide

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

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

• additionalClass: String,

  • Boosted class that volition be added to the root node of the component.

• renderCustomControls: Function, custom controls rendering

  • Utilise this to render custom controls or other elements on the currently displayed image (similar the fullscreen button)

                    _renderCustomControls                  (                  )                                    {                  render                  <                  a                  href                  =                  ''                  className                  =                  'prototype-gallery-custom-action'                  onClick                  =                  {                  this                  .                  _customAction                  .                  bind                  (                  this                  )                  }/>                  }                

• renderItem: Office, custom detail rendering

  • On a specific item [{thumbnail: '...', renderItem: this.myRenderItem}] or
  • Every bit a prop passed into ImageGallery to completely override _renderItem, see source for reference

• renderThumbInner: Role, custom thumbnail rendering

  • On a specific item [{thumbnail: '...', renderThumbInner: this.myRenderThumbInner}] or
  • Equally a prop passed into ImageGallery to completely override _renderThumbInner, come across source for reference

• renderLeftNav: Function, custom left nav component

  • Use this to render a custom left nav control
  • Passes onClick callback that will slide to the previous particular and disabled argument for when to disable the nav

                    renderLeftNav                  (                  onClick                  ,                  disabled                  )                                    {                  return                  (                  <                  button                  className                  =                  'image-gallery-custom-left-nav'                  disabled                  =                  {                  disabled                  }                  onClick                  =                  {                  onClick                  }/>                  )                  }                

• renderRightNav: Part, custom right nav component

  • Use this to render a custom right nav control
  • Passes onClick callback that will slide to the next item and disabled argument for when to disable the nav

                    renderRightNav                  (                  onClick                  ,                  disabled                  )                                    {                  return                  (                  <                  push                  className                  =                  'image-gallery-custom-correct-nav'                  disabled                  =                  {                  disabled                  }                  onClick                  =                  {                  onClick                  }/>                  )                  }                

• renderPlayPauseButton: Function, play interruption button component

  • Utilize this to render a custom play pause button
  • Passes onClick callback that volition toggle play/pause and isPlaying statement for when gallery is playing

                    renderPlayPauseButton:                  (                  onClick                  ,                  isPlaying                  )                  =>                  {                  return                  (                  <                  push                  type                  =                  'push'                  className                  =                  {                  `epitome-gallery-play-push button                      ${                      isPlaying                      ?                      ' agile'                      :                      ''                      }                    `                  }                  onClick                  =                  {                  onClick                  }                  />                  )                  ;                  }                

• renderFullscreenButton: Function, custom fullscreen button component

  • Use this to return a custom fullscreen button
  • Passes onClick callback that will toggle fullscreen and isFullscreen argument for when fullscreen is active

                    renderFullscreenButton:                  (                  onClick                  ,                  isFullscreen                  )                  =>                  {                  return                  (                  <                  push                  type                  =                  'button'                  className                  =                  {                  `image-gallery-fullscreen-push                      ${                      isFullscreen                      ?                      ' active'                      :                      ''                      }                    `                  }                  onClick                  =                  {                  onClick                  }                  />                  )                  ;                  }                  ,                

• useWindowKeyDown: Boolean, default true

  • If simulated, keydown events will be listened for on the epitome gallery

Functions

The post-obit functions tin can exist accessed using refs

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

Contributing

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

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

Build the example locally

            git clone https://github.com/xiaolin/react-image-gallery.git cd react-image-gallery npm install npm starting time                      

Then open up localhost:8001 in a browser.

License

MIT

GitHub

https://github.com/xiaolin/react-image-gallery

peguesfrompard66.blogspot.com

Source: https://bestofreactjs.com/repo/xiaolin-react-image-gallery-react-image

Share this post