Up next in 10
React.js Tutorial to Create Multiple Tabs Using react-tabs Library in Browser Using JSX
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
create uh tabs inside react CHS multiple
0:07
tabs inside a single website so you will
0:10
see we have different Windows each
0:13
window has its own content so we have
0:16
six Windows namely title 6 Title 5 title
0:20
4 so if any of the tabs the user goes in
0:24
tab is nothing but if you see in the
0:25
browser itself we have multiple tabs
0:27
open so in
0:30
in this tab I have this content in this
0:33
tab I have this content so similarly
0:35
inside your website also you can have
0:37
multiple tabs so we have created six
0:39
tabs right here and you can see in each
0:42
tab we are displaying this different
0:44
content so there is a package inside
0:47
react CH which you can create tabs
0:52
inside your application so the package
0:54
name is react tabs simply so if you just
0:58
go to npmjs
1:01
and just search for this package react
1:06
tabs so it's a accessible open source
1:10
widget package which allows you to
1:12
create tabs inside your react CH
1:14
application so it's almost having
1:16
498,000 weekly downloads it's a very
1:19
popular package and I've already
1:21
installed it so I will just show you a
1:24
very basic example so first of all you
1:27
need to create a functional component
1:29
and and then you need to Simply import
1:31
this package by using the import
1:33
statement so we simply write here import
1:37
and then we require the
1:40
tab
1:41
tabs tab list so all this will be coming
1:45
from the this package tab
1:47
panel and it will be coming from this
1:50
package react
1:57
tabs so it's almost 10
2:00
kilobyte very minimalistic package the
2:03
size is very small so we also need to
2:06
require the CSS of this package so it is
2:08
present in react
2:11
tabs slash style and slash react
2:16
tabs do CSS so it's almost
2:20
686 bytes so very small size CSS file we
2:24
don't need to import for The Styling so
2:27
now we can directly go to the jsx
2:29
wherever you're developing your
2:30
application and you can create the tabs
2:35
and you need to surround your tab using
2:38
this parent tag which is
2:41
tabs and this is actually the component
2:44
and inside this you will have your TBL
2:47
list component and inside this you will
2:50
Define each Tab and each tab actually
2:53
contains a title so you'll simply
2:55
provide this is actually the
2:58
title Title One
3:00
and here you can create multiple tabs so
3:03
you use this component of tab and then
3:06
you give the
3:08
title so title in this
3:12
way I will create multiple tabs six tabs
3:16
I will create so I will just change the
3:19
title title four Title Five title six so
3:23
now if I refresh the browser you will
3:25
see now we have six tabs available and
3:28
in each tab you you can directly go to
3:30
it by simply clicking on that and you
3:32
will go to it tab is a certain window
3:36
similarly in browser we have different
3:38
tabs so you can create inside your react
3:40
CH application multiple tabs so now to
3:43
show the content so whenever click
3:45
whenever user clicks on those particular
3:48
tabs we have this component of tab
3:52
panel we surround this this parent tag
3:56
and inside this you define content for
3:58
each tag in the same order so this is
4:01
the first tab
4:03
content so in this way each tab table
4:08
you need to create so this is a second
4:10
this is third fourth fifth sixth so here
4:14
you will
4:16
simply so now let's suppose I want to
4:19
embed a image so I will simply import a
4:22
image which is stored in my assets
4:24
directory 1. jpg so I need to display
4:28
the image in the second tab so what I
4:30
will do instead of I will customize this
4:35
my image so in the second tab I will
4:38
display the image I will have this image
4:41
tag I will make the width as 500 and the
4:45
height also
4:48
500 so now what happens is that in the
4:52
first tab in the second tab in you can
4:56
see now we are displaying this image in
4:58
this third tab
5:01
so you can have multiple tabs containing
5:03
different kinds of information and tabs
5:07
allows you to create uh different
5:09
content you can create multiple types of
5:12
content in less space you can create
5:14
multiple tabs like this so this is your
5:17
tab
5:24
two this is your tab five this is tab
5:28
six
5:35
for so in this way you can create tabs
5:38
it's very simple you surround it you can
5:42
see it's a very simple package the
5:45
configuration is quite simple and you
5:48
can create tabs and manage it
5:50
accordingly so this is actually the
5:53
package react apps so thank you very
5:55
much for watching this video and do
5:56
check out my website as well uh free
5:59
media tools.com uh which contains
6:02
thousands of tools regarding audio video
6:04
and image and I will be seeing you in
6:07
the next video
#Computer Education
#Programming
#Web Design & Development