Changing slideInterval prop dinamically

[jpaladin]

My use case needs an ability to set duration of the slide different for each i.e.

const images = [
    {
      original: "https://picsum.photos/id/1018/1000/600/",
      thumbnail: "https://picsum.photos/id/1018/250/150/",
      duration: 1000
    },
    {
      original: "https://picsum.photos/id/1015/1000/600/",
      thumbnail: "https://picsum.photos/id/1015/250/150/",
      duration: 5000
    }
]

So I tried setting the slideInterval prop dynamically in the onBeforeSlide prop callback like this using the slideInterval state variable

<ImageGallery
        items={images}
        slideInterval={slideInterval}
        autoPlay={true}
        onBeforeSlide={(nextIndex) => setSlideInterval(images[nextIndex].duration)}
 />

This does not apply the newly set slideInterval

[jpaladin]

My idea of why this doesn't work is that your components componentDidUpdate does not take into account the slideInterval prop

react-image-gallery/src/ImageGallery.js

Line 267 in a5201ce

componentDidUpdate(prevProps, prevState) {

[jpaladin]

My current workaround was to use ref and calling pause and play methods but I think it would be more elegant if it was by design.

      <ImageGallery
        ref={(input) => (this.gallery = input)}
        slideInterval={slideInterval}
        autoPlay={true}
        onBeforeSlide={(nextIndex) => {
          setSlideInterval(images[nextIndex].duration);
          this.gallery.pause();
          this.gallery.play();
        }}
      />

[xiaolin]

Agreed, It would make sense to handle the interval refresh automatically. In the live example, it is actually doing the same to refresh the slideInterval prop https://github.com/xiaolin/react-image-gallery/blob/master/example/app.js#L64

Easy enough to place this logic into the lib.