live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
React.js Instagram Stories Builder Component Using react-insta-stories Library With Examples in JS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/583475a4c948a3681d3d60452454e23e
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you a specific
0:05
react CHS component which allows you to
0:08
make these Instagram stories you can see
0:11
it consist of images videos it appears
0:14
for a certain period of time so it is
0:17
quite like the interface that you see in
0:19
Instagram or Whatsapp stories that you
0:21
see so we have like this this interface
0:26
there is a specific module which is
0:28
there which is called as react insta
0:32
stories this is actually the module
0:34
right here the command is very simple
0:36
npmi react insta stories it is almost
0:39
cost 20,000 weekly
0:41
downloads so it has got all the options
0:44
so you can create Instagram stories
0:46
right in the browser itself from a
0:49
series of images and videos so I will
0:51
show you step by step so just create a
0:53
functional
0:55
component and then we need to import
0:57
this module so using the import
0:59
statement so there is the
1:02
stories which will be coming from
1:05
react insta
1:07
stories so in this way you will import
1:10
this module at the very top and now to
1:12
use this module we need to construct a
1:16
array let me call this as stories so
1:19
this will be an array of objects each
1:21
object will contain three properties
1:23
first is the actual URL of the image so
1:27
you can take any image from the internet
1:30
or you can even provide your local image
1:32
as well so I'm just taking this pixel's
1:34
image and here then you can provide some
1:38
more information about the image who
1:41
uploaded this image so we have this
1:43
heading option so let me provide a joho
1:48
you can replace it with your own name so
1:52
it will appear at the bottom side
1:55
section you can just give it a heading
1:58
post heading
2:00
like this posted 5 minutes ago like this
2:04
small little text and then you can even
2:07
show your profile image
2:09
basically which account has uploaded
2:12
this image so I will
2:15
just also take this image from an
2:18
internets
2:20
so so this is actually the additional
2:23
information about this image and lastly
2:26
we also have this property which is
2:28
duration so how much time this image
2:31
appears in the story so let me provide
2:33
3,000 milliseconds so this uh this
2:36
equals to 3 seconds so for 3 seconds
2:39
this image will appear and we will
2:41
repeat
2:43
this two more times with different
2:46
images so you can see we are again
2:48
having another image we are changing the
2:51
name and the profile picture this will
2:54
appear for 5 seconds because this is
2:56
equal to 5,000
2:58
millisecond you can even show uh videos
3:01
as well you can even have video stories
3:03
as well now for video you will
3:08
actually change the type parameter you
3:10
need to add the type parameter right
3:14
here so there is a specific type
3:17
parameter you need to add type for video
3:19
because this is actually a video we are
3:21
fetching it from this URL and having
3:24
this video
3:25
story so this appears for 8
3:28
seconds and how to actually show this in
3:32
the jsx we will use this component which
3:35
is we imported this component
3:38
stories and this component actually
3:40
takes the stories as an argument as a
3:43
prop and here we need to pass the
3:45
stories that we defined in this uh
3:48
variable which is an array of
3:50
objects and then it again takes
3:53
some default options which is the
3:55
default interval so it will equal to the
3:58
total amount of SE seconds so I'm just
4:01
equaling it to 1500 seconds and the
4:05
width of the story this is very
4:07
important I will just make sure it is
4:11
432 and then you provide your
4:16
height so exactly I will equal to the
4:19
Instagram story that he has and then it
4:22
takes the option if you want to provide
4:24
add additional CSS Styles you can
4:27
provide this using this property I will
4:29
just just provide a border radius of 10
4:34
pixel and a box
4:37
Shadow so using this uh attribute you
4:40
can provide some more additional
4:42
parameters to your story we're providing
4:45
a box Shadow right
4:49
here and there is an option here
4:52
keyboard navigation you can even control
4:54
the story by your keyboard so you can
4:56
set it to true and loop there is a loop
4:59
op option if you make it true then it
5:01
will repeat unlimited number of
5:04
time so if you just show it in the
5:07
browser if you check go to Local Host
5:12
5173 you will
5:14
see each image will appear for certain
5:17
time period that we mentioned right here
5:19
and this is your video story the video
5:21
is playing you can even control it by
5:24
your keyboard if you press the arrow
5:27
keys you will see it will navigate to
5:29
the next image in the
5:31
story so in this way if you're building
5:33
it a Instagram clone then you can use
5:35
this module to make the Instagram story
5:39
component and we do have these call back
5:42
functions when the story start you can
5:45
actually Define
5:47
this just console log message that your
5:50
story has been
5:53
started then we also have a call back
5:56
function when the story ends we also
5:58
have this call back back so index
6:01
variable is passed so this actually
6:04
refers to which story is
6:07
basically doing its so it is actually
6:10
and when all the stories are ended we
6:13
actually have this call back function
6:18
that all stories
6:24
ended so this individual story on start
6:28
on end basically this index variable is
6:30
passed right here so we are showing the
6:32
this printing out this Dynamic index
6:35
variable so it is if you check your
6:42
console this story one started if you
6:44
see then Story one ended story two
6:48
started and when the story two ended you
6:51
will see Story three
6:53
started when all the stories will be
6:56
ended then that call back message will
6:58
be printed out that all
7:00
stories have been
7:03
ended you can see that so we have all
7:06
these call back
7:08
functions which will be very much
7:12
useful so even even control the progress
7:15
par Styles if you want to change this
7:19
color default color is a white color
7:22
that you see right here you can even
7:23
change this color as well by providing
7:25
this progress bar Styles you can change
7:27
this background color to Black and
7:30
height you can change it to five so now
7:33
if you
7:36
see it has been changed to black color
7:39
if you
7:40
see so in this way you can control this
7:43
and make this awesome looking Instagram
7:45
stories Builder component for react CH
7:47
applications you can use images videos
7:49
any sort of component so you can use
7:53
this so thank you very much for watching
7:54
this video and do check out my website
7:56
as well freem mediat tools.com which
7:58
contains thousands of free tools
8:00
regarding audio video and image and I
8:04
will be seeing you in the next video
#Flash-Based Entertainment
#Online Media
#TV & Video
#Online Video
#Animated Films