Creating Instagram UI with ReactJS - Part 6: Multiple Stories!

This is part six of the series where I create the Instagram UI with ReactJS.

In this part I will continue working on the stories. We will create a multi-story story which you can navigate through.

The code in this video can be found on this GitHub repository:

Timestamps:
0:00 Introduction
1:42 Transition to next story
5:32 Adding pause functionality
9:25 Adding progress bars
13:46 Styling progress bars
16:02 Adding keyframes
20:12 Adding navigation buttons

[abhishekvishwakarma]

Amazing content helped me a lot to replace react-insta-stories package, one interesting thing I noticed: you handled progressbar and switch to next slide when videos end but how to handle the case of Images how someone will trigger the end of Image -> actually it is quite simple since we've used `duration` for videos and just assign a default duration for images (in code itself if duration is not defined Like this ::

` style={{ animationDuration: `${story?.duration ?? 1.5}s` }}` -> here story.duration is only for videos and 1.5s for Images

Now in order to handle the autoswitching to next slide in Images when this duration (1.5s) ends ::

`useEffect(() => {

if {
setTimeout(() => {
setStoryIndex((value) => (value + 1) % stories.length);
}, 1500);
}
}, [stories, stories.length, storyIndex]);`

Thanks again 🤩

[yaredsolomon]

thanks sir i like your videos so much.