videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a React.js Pagination Data Component in JSX Using react-pagination-library in Browser
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/e5f4fb09d2bc2cf9434c8b12e011e2d1
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less 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
implement pag Nation inside reacts
0:07
application using a module called as
0:09
react page Nation Library so you can see
0:12
on your screen we are showing a simple
0:15
demo so this demo is actually showing
0:19
the images in pagination form so we are
0:21
on the first page and we can navigate to
0:24
the second page the next two images will
0:26
show and same goes with the third page
0:28
as well so it also shows you the current
0:30
page on it highlights the current page
0:34
and we also have these previous page
0:36
next page controls available so this is
0:39
actually the uh Library I'm talking
0:42
about if you navigate to npmjs.com and
0:45
just search for this package which is
0:48
react pag
0:51
Nation uh Library uh this is
0:55
actually the name of the package so just
0:59
search for this
1:08
so I have already installed it so after
1:10
installing
1:12
it let me just show you the full example
1:14
so just make a simple functional
1:16
component and then you need to import
1:18
this package so for importing it we use
1:21
the import
1:25
statement which will be coming from this
1:28
react pagination live libr
1:33
so let me just open the zoomit
1:43
tool so we import this package here
1:46
which is 6 kiloby of size and for this
1:50
we also need to import the CSS file of
1:53
this package as well so
2:00
it is located in on inside the build
2:03
directory then CSS then index. CSS this
2:07
is just the CSS file that we are
2:09
importing first of all the package then
2:11
the CSS file of that package and now we
2:14
are uh paginating these six images that
2:18
I have inside my assets directory so
2:20
these six images you can take your own
2:23
images as well it can be any any form of
2:26
data it you can even fetch data from a
2:29
rest API
2:30
but we are just taking example of images
2:34
here in this example so I just imported
2:36
all the six images using the import
2:39
statement you can see one by one we
2:41
imported all these six images so after
2:44
importing it uh now we need to declare
2:46
some State variables for doing the
2:49
pagination now we need to construct the
2:51
array here which will contain all the
2:58
images so after doing this now we need
3:01
to tell how many images that we want to
3:03
display so images per page so I will say
3:06
two and then we also need a variable for
3:10
keeping track of the current page inside
3:13
the pagination so we declare U state so
3:17
initial value will be the first page so
3:20
U State one images per page will be two
3:23
and these are the images we have
3:25
constructed this
3:28
array
3:30
so now after this we need to also
3:33
calculate the index of the last
3:41
page so this will
3:44
be a simple math here that I will be
3:47
doing current
3:48
page multiplied by images per
3:53
page
3:54
and the index
3:57
of first image
4:01
so this will be index of last
4:06
image minus the images per
4:11
page so this is simple math formula here
4:14
index of last image index of first image
4:16
we need these two variables for the
4:22
pagination and then we also need a
4:24
variable which will be current images
4:28
which we will be slicing it
4:30
based upon the index of first image
4:32
which we calculated and index of last
4:41
image so now for showing the pagination
4:49
controls we will align everything in the
4:51
center position so I will just give
4:53
these classes text align Center padding
4:55
it's 20 pixel after this we have the
4:58
heading
4:59
and inside this once
5:03
again we will just align this div in the
5:06
center
5:06
position so inside this we will Loop
5:10
through the images so this current
5:12
images map and for each image we will be
5:18
showing this image tag and here we'll be
5:21
passing the properties first of all the
5:24
key and the
5:27
source and we will just style this IM
5:30
providing a width of 200 pixel and a
5:33
height of 150
5:38
pixel and a border radius of 8 pixel to
5:41
just round the image so if you refresh
5:44
your application uh you will see two
5:46
images by default will
5:49
show because we configured this inside
5:53
the variable that we only want to show
5:55
two images per page so it is showing the
5:58
first page in the pagination and and now
6:01
we also need to show the pagination
6:03
controls so just outside this div we
6:05
will render this component which is
6:08
pagination and this component takes some
6:10
options right here first of all here you
6:13
need to provide the current
6:20
page and then it also takes the total
6:22
number of pages which will be there in
6:24
the pagination so this can be calculated
6:27
using this formula here math dos it's a
6:31
math function and here we pass images.
6:35
length total images divided by the
6:38
images per page so this will gives give
6:41
us the total number of
6:44
pages so if you refresh now you will see
6:47
that by default three pages have been
6:50
there so it is highlighted by this green
6:54
color so but we can't click on
6:57
individual pages so now to bind the as
7:00
well so we need
7:02
to just
7:05
uh give this property which is change
7:09
current page and here you need to bind a
7:11
function so whenever you click any of
7:14
the individual Pages this call back
7:16
function will execute so here we just
7:18
need to Define this
7:20
function so when you click on individual
7:25
page this function will execute pass it
7:29
uh and the page number will
7:31
automatically get passed in this
7:33
function so here we just need to change
7:36
the current page we can
7:39
easily do this by calling this hook
7:41
function Set current page and we'll be
7:44
changing that current page to the click
7:47
page so now if you refresh your
7:49
application you will be able to navigate
7:51
to the second page now the next two
7:53
images will show same goes with the
7:56
third page as well so now the pagination
7:58
is working
8:00
so if you also want to provide a
8:01
customized theme uh there is an option
8:04
right here you can provide the
8:06
pagination theme right here as well
8:09
there is a theme option available
8:14
and you can even show the current
8:17
page in the H2 so we can simply say
8:22
current page and we can render out this
8:25
variable current page so that the user
8:28
can see which page they are on so you
8:31
can see current page is one if I
8:33
navigate to the second page now it will
8:35
show the current page is two if I
8:37
navigate to the third page then it shows
8:39
current page is three so in this way you
8:41
can Implement a nice little pagination
8:44
inside your react CH application so this
8:47
data is can be anything it can be images
8:50
it can be text as well so you can fetch
8:54
data from a database or API so I'm just
8:56
taking a simple example so all the sorts
8:59
code that I used in this video is given
9:01
in the description of this video so
9:04
thank you very much for watching this
9:05
video and do check out my website as
9:07
well uh free mediat tools.com uh which
9:11
contains thousands of tools regarding
9:13
audio video and image and I will be
9:16
seeing you guys in the next video
#Arts & Entertainment
#Online Media
#Programming