Up next in 10
Build a React.js Frontend Pagination Component With Controls Using react-ultimate-pagination in JSX
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/96d83e30d361959bc88a6b2184d00fd8
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 how to
0:06
implement simple pagination inside your
0:09
react CH
0:10
application uh you will see I'm looping
0:14
through or paginating my images so I
0:17
have a total of six images and I'm
0:19
displaying two images on a single page
0:21
of the paginations so we have these all
0:24
these controls navigation controls we
0:27
can go to directly the first page
0:30
previous page this is the first page
0:32
second page third page and this is the
0:34
next page in the pag nation and if you
0:36
want to go to the last page you can
0:38
click the last button we have all these
0:40
controls on the very first page we are
0:42
displaying two images per page and if I
0:45
go to the second page now the next two
0:48
images in the page generation will show
0:51
and similarly if I go to the third page
0:53
the last
0:54
page the last two images will show so
0:58
this is a nice little pagination if you
1:00
have a series of images that you can
1:02
need to pag inate this can be anything
1:04
images text anything but I've have shown
1:07
you a very simple example so you can
1:10
click the last button to navigate to the
1:12
last page in the pagination or you can
1:14
click the first button to navigate to
1:17
the first page in the pag Nation by
1:19
clicking these buttons and again we also
1:22
have the next and the previous button if
1:24
you want to go to the previous or next
1:26
page in the pag Nation so the package
1:29
that we are using for this is if you
1:31
just go to npmjs.com and just search for
1:34
this package which is react ultimate
1:38
pagination react ultimate pagination so
1:41
this is actually the package that I am
1:45
using
1:46
so you just need to install it by
1:49
executing this command I've already
1:51
installed it so it's almost having
1:54
14,000 weekly downloads so just make
1:59
first of all if functional component I
2:01
have given all the source code in the
2:03
description of this video so don't need
2:05
to worry about it and then we need to
2:07
import this actual package which is
2:10
create
2:13
ultimate pagination so this will be
2:16
coming from this package it's almost 7
2:19
kilobytes not a very heavy package very
2:22
lightweight and it contains this
2:24
component create ultimate pagination so
2:27
we first of all import it and all my
2:29
Imes are present in assets folder inside
2:33
the source so one by one I will import
2:35
all these images it's a jpg images so
2:38
using the import statement we can
2:39
directly import all these six images so
2:43
all the data you can import it replace
2:46
it with your own data it can be coming
2:48
from a database or API but for this
2:50
specific example I'm just taking these
2:52
six images for the
2:54
pagination and now we come we need to
2:58
declare first of all some State
3:01
variables so right
3:04
here so first of all we need to import
3:07
all these images we need to create an
3:09
array and one by one I will import all
3:11
these images image 1 image 2 image three
3:14
image 4 image 5 and Image six so we have
3:18
created a simple images array which are
3:20
holding all these six images and then we
3:24
need to configure how many images you
3:26
want to display per page so I will be
3:28
displaying two images so we have
3:29
declared a variable for that and then
3:32
for using this we will calculate the
3:34
total number of pages using this simple
3:37
formula math
3:39
dos this is a method and then we divide
3:43
the length how many total images are
3:46
present so six divided by images per
3:50
page which comes out to be three because
3:53
6 ided 2 is three so it will give three
3:57
total pages and then we need to declare
4:00
one state variable for keeping track of
4:02
the current
4:04
page so Set current page and we using
4:08
the UST State hook initial value will be
4:10
one so if you load the application we
4:13
will be having on the first page on the
4:15
pag
4:16
nation and after this we need to declare
4:21
some more variables index of last image
4:24
this means that we need to calculate the
4:27
total last page so for this this we need
4:30
to current page divided by the images
4:34
per
4:35
page so if you are on the first page
4:39
first page divided by images per page
4:42
which is 1 multiplied by two so this
4:45
comes out to be two so index of last
4:48
image will be two so we just need to
4:50
calculate
4:52
these and similarly we need to calculate
4:55
for the first image as
4:57
well so you just need to repl these
5:00
three variables right
5:04
here this is actually the formula right
5:06
here in the
5:08
math so if you're a little bit confused
5:10
just write this this is just helpful for
5:13
the pagination controls if you just
5:15
navigate to the last image or the first
5:17
image or the current images this will be
5:21
we are simply using the slice method to
5:23
get the first two
5:25
images in the pagination that Sol that
5:28
we are doing so these are all the state
5:30
variables that we need so after you do
5:32
this we come to the jsx where we embed
5:35
this
5:36
pagination so we need to give it
5:39
some custom styling so we need to align
5:43
it in the center position so we just
5:45
give it a padding of 20
5:48
pixel and inside this we will simply say
5:52
image
5:54
pagination example and after this we'll
5:57
again have another div tag and for this
6:00
we will change the display property to
6:05
flex and then justify content to be
6:08
again be Center and we be having a gap
6:11
of 10
6:14
pixel and here we'll be looping through
6:16
all these images current images do
6:21
map and for each image we will be
6:24
displaying it in the image tag
6:30
so each image will key take an key
6:33
parameter which I will say index source
6:36
is the actual image path and then it
6:39
also takes you'll style this each image
6:42
we just give it a width 200 pixel and
6:45
height of
6:47
also uh 150
6:51
pixel and I will just give it a border
6:53
radius of uh 8 pixel so here we are
6:58
displaying the images and one more thing
7:00
we need to do after this we need to
7:03
embed this
7:05
uh pagination component so for this we
7:09
are using this ultimate
7:11
pagination so for this we need to
7:14
declare some Global variable so for
7:17
configuring the pagination so right
7:20
here you can configure this just create
7:23
a variable I will call this as ultimate
7:28
pagination so
7:30
we will use this method that we
7:33
are importing it create ultimate
7:36
pagination if you see which is coming
7:38
from this package react ultimate
7:40
pagination so this method actually takes
7:42
an object which contains two properties
7:46
first is this property which is items
7:49
type to
7:51
component so here you need to
7:53
Define this item type
7:57
to so you can directly pass it
7:59
so we can
8:02
simply
8:03
item type to component and the second
8:06
one is you need to pass a wrapper
8:08
component so for this I will just create
8:11
a wrapper component so both these two
8:13
things we need to declare first of all
8:16
this item type to component this will be
8:19
a simple object so here you will be
8:22
containing all the components which will
8:24
contain all the controls of the
8:26
pagination and then we will have a
8:29
functional
8:30
wrapper component this is just a little
8:32
bit configuration that you need to do
8:34
for this
8:36
Library so you can copy paste all this
8:38
code I have given the code in the
8:40
description so you don't need to
8:42
understand all this code this is just
8:44
little bit configuration that you need
8:46
to do for this
8:47
pagination so this is just a wrapper
8:50
component of the pagination so we just
8:52
need to pass this wrapper component
8:54
that's all that we are doing right
8:57
here and inside this I items to
9:00
component here we will have all the
9:02
controls of the pag naations so one by
9:04
one I will explain you so are the
9:08
current page number ellipse the first
9:11
page link previous page next page last
9:13
page so all these components are
9:16
controls that you see on the pagination
9:18
so it is actually contained inside this
9:20
property so one by one I will Define all
9:23
these components it's just a on line
9:25
components
9:29
so this this code you just need to write
9:31
it for once this is just a configuration
9:34
code so you will see this is just a
9:38
dynamic last page next page previous
9:41
page first page and this is your actual
9:44
page it will take the value is active on
9:47
click so that's all that we need to do
9:50
so here we are putting the actual page
9:51
number and we are binding an onclick
9:54
listener so whenever someone clicks on
9:56
that particular page they will redirect
9:59
so so that's all that we need to do and
10:01
now we can actually use
10:04
this directly after this we can pass use
10:09
this ultimate
10:11
pagination component and here we need to
10:15
pass the current page which is contained
10:17
inside the current page variable total
10:20
Pages here you need to pass the total
10:23
Pages all these variables are contained
10:26
and on change which is most important
10:29
for function so when the page number is
10:31
changed we are binding the Set current
10:33
page which we have declared so initial
10:36
value will be one so whenever someone
10:37
changes the page in the pagination this
10:40
function will execute so if you try to
10:42
refresh your application you will see
10:44
the pagination will show and currently
10:47
we are on the first page of the
10:48
pagination and if I click the second
10:50
page the next two images will show the
10:53
third page and similarly if you want to
10:55
navigate to the first page of the
10:57
pagination you click this button and if
10:59
you want to go to the last page you will
11:01
click this button so this is a nice
11:03
little pagination component guys we
11:05
developed in this video step by step I
11:07
showed you this package which is react
11:09
ultimate pag Nation so if you need the
11:12
full source code the link is given in
11:14
the
11:15
description so thank you very much guys
11:17
for watching this video and do check out
11:20
my website as well free mediat tools.com
11:23
uh which contains thousands of tools
11:26
regarding audio video and image and I
11:29
will be seeing you guys in the next
11:30
video
#Programming