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
View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you how to
0:04
integrate this pagination library inside
0:08
react sh so this is actually a image
0:11
pagination Library you can paginate any
0:13
data I'm just taking a simple example of
0:16
paginating six images and for this we
0:19
are displaying two images per page so we
0:22
are on the first page so you can see
0:24
it's showing current Pages first and if
0:26
I navigate to the second page in the pag
0:28
Nation so this is the next two images
0:30
will show and same goes if I go to the
0:33
third page the last two images will show
0:36
it will also show you the current page
0:38
so you are we have the previous page you
0:41
can go to the previous page all these
0:42
controls pagination controls are
0:44
available to you so this is actually the
0:47
package uh which is react pag Nation
0:50
Library so if you just go to npmjs.com
0:53
so just go to just search for react pag
0:58
Nation Library so we are using this
1:03
package so simply search
1:11
it so if you just search for this
1:14
package on Google just type it it's
1:17
fairly new package that's why it is not
1:23
appearing so now I will show you first
1:26
of all you need to install it after
1:29
installing it
1:30
we just need to make a simple functional
1:33
component and then we need to import
1:36
this so we simply say
1:40
import
1:44
pagination from this package which is
1:48
react pag Nation library and it's almost
1:52
6 kiloby size so in this way you can
1:55
import this component of pagination and
1:59
we do need to in the CSS file as well
2:01
for this package so simply write react
2:04
pag
2:07
Nation library and import the CSS
2:12
file just a 2 kilobyte size which is a
2:16
CSS file we just need to import and my
2:18
all the images are present in the assets
2:20
directory inside source so one by one I
2:23
will import all the six images which
2:25
will be used for the
2:27
pagination so this data can be coming
2:30
from database or any sort of API as well
2:33
I'm just taking a very simple example of
2:35
paginating these six images so now in
2:39
the we need to declare some State
2:41
variables so I will declare this array
2:43
here image 1 image
2:46
2 just store all these images in this
2:50
array here and then I will simply
2:53
declare an image per page so we
2:55
displaying two images per page and also
2:58
we need the variable for keeping track
3:01
of the current page in the pagination so
3:03
this will be one you'll be using U State
3:06
hook so whenever you load your
3:08
application the initial page will be one
3:12
of the
3:14
pagination and apart from that we need
3:16
to calculate the variables for
3:19
calculating the index of last page first
3:22
image and the current images so we will
3:25
use the slice method which is available
3:28
in JavaScript we pass the index of first
3:30
image and the index of last image so
3:33
this will give you the current images
3:34
for the current
3:37
page so I will give all the source code
3:39
in the description of this video so now
3:42
it's simple you go to the jsx wherever
3:44
you need to embed this pagination and I
3:47
will align it in the center
3:53
position and then we simply say
3:58
image pag
4:02
example then we simply give it a style
4:07
display I will change to
4:09
flex justify content I will change it to
4:13
Center and I will have a gap of 10 pixel
4:17
and inside this you Loop through all
4:19
your images by using the map
4:23
operator like this very simply so we use
4:26
the image tag and we provide some par
4:29
parameters to this image tag such as the
4:31
key the
4:33
source and then we
4:36
also provide some custom Styles so I
4:40
will just make the width of the image to
4:43
be 200 pixel and the height to be 150
4:49
pixel and I will just give it a border
4:51
radius of around 8
4:54
pixel and just after this you will embed
4:58
the pagination component
5:00
so we just embed this by this pagination
5:04
component and it actually takes some
5:05
attributes the very first attribute it
5:08
takes is the current page of the
5:11
pagination current page so we have
5:14
declared the state variable so we will
5:16
directly attach it the second one is
5:19
take it's a total pages in The pag
5:22
Nation so this also we have we will
5:25
calculate this using a simple formula
5:27
math dos and the total images length I
5:31
will divide this by the images per page
5:34
so let's suppose we have six images I
5:36
will six divided by images per page
5:39
which is two so which comes out to be
5:41
three so total pages will be three and
5:44
then we will have the third parameter
5:46
which will be change current page so
5:50
whenever user clicks on the next page in
5:52
the pagination this call back function
5:54
we need to Define it so we need to Def
5:57
uh inside this function
6:01
just need to change the current page so
6:04
it will have this page number which will
6:07
be passed so we just need to set the
6:10
current page to the this page
6:14
number so that's all that we are doing
6:16
in this function so last but not least
6:19
we can even attach a theme to this
6:21
pagination theme option so there are
6:24
various themes available one such theme
6:27
is bottom border so these four options
6:30
are supported by this pagination
6:31
component and if you refresh your
6:34
browser you will see the pagination will
6:37
look something like this and we are on
6:39
the first page the first page is
6:42
selected and we are seeing the first two
6:44
images and as I click the second page
6:48
you will see it will navigate to the
6:49
second page and same goes with the third
6:52
page and if you want to display three
6:55
images per page you can change this
6:57
variable
6:59
simply change from 2 to three and now
7:02
three images will show but now the pages
7:04
will only be two because total images is
7:07
six so we are showing three images per
7:10
page so if I go to the second page you
7:12
will see the next three images on the
7:13
pagination so this is the actual reaous
7:17
pagination Library you can paginate any
7:20
sort of data it can include images or
7:23
text so thank you very much for watching
7:25
this video and do check out my website
7:28
as well uh fre mediat tools.com uh which
7:32
contains thousands of tools regarding
7:34
audio video and image and I will be
7:37
seeing you guys in the next video
#Computer Education
#Online Video