Up next in 10
Build React.js Frontend Custom Pagination of Items With Color Themes Using sweetpagination Library
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-react-js-frontend-custom-pagination-of-items-with-color-themes-using-sweetpagination-library/
Show More Show Less View Video Transcript
0:07
Uh hello friends, today in this tutorial
0:08
I'll be showing you that how to
0:10
implement front- end pagionation inside
0:12
ReactJS application. [snorts] So for
0:14
this purpose we will be using a special
0:16
library of ReactJS which is called as
0:19
sweet pagination. So basically it's a
0:21
ReactJS component library to render
0:24
beautiful pagionation themes. So which
0:26
comes with various styles. You will see
0:28
that this is a first style, this is a
0:30
second style, this is a third style. So
0:32
you can also have custom styles as well.
0:34
You can write CSS rules to make it
0:38
really custom according to your
0:39
application. So you can see this is a
0:42
module. It has got 377 weekly downloads.
0:45
So we will be using this uh newly
0:48
library which is there on npm. So if you
0:50
just search sweet pagination, this
0:54
module will come here. It's a pagination
0:56
module for ReactJS applications. So if
0:58
you have a lot of data that needs to be
1:00
displayed on the screen uh you can just
1:03
use pagination for that. So simply
1:05
search sweet pagination and this is a
1:08
module. So let me just show you the
1:10
short little demo of this application.
1:12
So basically you will see that we are
1:14
displaying five items per page
1:17
and these are the pagination items. So
1:19
if you go want to go to the second page
1:21
the next five items will be displayed
1:24
here. If you want to go to the third
1:26
page, the next five items will be
1:28
displayed. Similarly, fourth, fifth. So
1:31
in this case guys, this is the
1:33
pagination things. So you can also
1:35
change the theme accordingly. U various
1:38
themes are there. So this is style one.
1:41
This is uh you can see it has got uh
1:44
this is the first theme. It has got
1:47
green theme. So green background color.
1:50
So if you change this style to style
1:52
two, this will change to different theme
1:55
here. This is a style two which as you
1:57
can see
1:59
different this different theme here. You
2:02
can also change the style to style three
2:04
also. So this will change to different
2:07
theme here. You can see so three themes
2:09
are available. So whichever you like you
2:11
can prefer you can make it and you can
2:14
also make it custom as well by attaching
2:17
a style.custom attribute to it.
2:21
And here inside your you can target it
2:23
style custom. So basically you can
2:26
change the background color of uh the
2:28
list
2:30
to black and make it as important. So
2:33
now you can see the background color has
2:36
been changed. So you can also change the
2:38
color as well. So let's suppose you want
2:40
to change the color to white. You will
2:42
see that the color has changed to white.
2:45
So you can make it customizable
2:46
according to you. So by writing these
2:48
CSS properties, it's very much
2:50
customizable and uh very easy to write.
2:54
And uh the main thing is that you can
2:56
also use some pseudo classes which is
2:59
there in CSS. Let's suppose when you
3:01
hover onto this, you want to change the
3:03
background color. You can do this simply
3:05
by
3:07
having this color. Let's suppose and
3:09
make it as important. So when you hover
3:12
onto this, you will see the background
3:14
color will change here accordingly. So
3:16
you can just customize accordingly guys
3:18
these properties. You can play with
3:20
these properties. You can also change
3:22
the font size of it. Let's suppose you
3:25
want to increase it by 24 pixel. Just
3:28
make it as important so that it
3:30
overrides the rules. So now you can see
3:32
it has increased here. You can also
3:34
change the width and the height as well.
3:37
You want to change the width. Let's
3:39
suppose I change the width to 24 pixel
3:43
and make it as important. So
3:49
uh
3:51
29 you can see that similarly you can do
3:55
this for height as well.
4:00
You can see that you can also do that
4:03
for height as well. So height
4:06
let's suppose 56 pixel important
4:14
you can see that so in this way guys you
4:16
can customize accordingly
4:18
if you want to so this is the thing you
4:21
can do this so this is a module sweet
4:23
pagination I have given all the source
4:25
code in the video description if you
4:26
want to download all the source code you
4:28
can go to the video description link to
4:30
download all the source code of this
4:32
example so let's start building this
4:34
application guys. So first of all what
4:36
you need to do is that you need to go to
4:38
code sandbox or you can develop this
4:40
application locally as well. I use this
4:43
website a lot. It's a very good website
4:45
to create react angular projects. So
4:48
it's very fast. So once you it creates
4:51
the brand new ReactJS application you
4:53
just need to add this dependency which
4:55
is sweet pagination. So just search for
4:58
this and you will get this dependency.
5:00
Just install this on the background. So
5:03
now after installation what you will see
5:05
here is that now you need to install
5:07
this. So sorry import this. So at the
5:09
very top
5:11
we will import the react library. So we
5:14
will say import react and we will make
5:17
use of the use state hook as well. So
5:20
this will be coming from the base react
5:22
library and we also need to import the
5:26
sweet pagination module from the sweet
5:30
pagenation module like this. That's all
5:33
and uh we just need to delete this. So
5:35
we don't need this. Instead we will dis
5:38
uh declare a array inside this items
5:44
where we will be displaying it. So this
5:46
will be I will be calling this as items
5:48
array. So here you will display items
5:52
just having this numeric array. You can
5:55
also have strings also inside this. This
5:58
can be mixed floating point numbers all
6:00
that stuff. So for example, I'm just
6:02
taking the integers here. So just taking
6:06
random integers. So this is your this is
6:09
your items which will be displayed on
6:11
the screen. And uh before you also need
6:14
to initialize your current page data.
6:17
This you can initialize it to anything
6:20
current page data and also set current
6:23
page data. So with the help of this we
6:26
are setting the data for our application
6:29
for the pagination. So for this we will
6:31
be using the u state hook which is
6:34
already included here at the very top.
6:37
So here we will initialize a array. So
6:40
you can initialize it any value. I'm
6:43
passing two. We will use the fill method
6:45
like this. That's all you need to do.
6:48
And after that guys what we need to do
6:50
is that we need to loop through this
6:52
array. So inside this div here. So we
6:55
need to what you need to do is that you
6:56
need to
6:58
current page data and uh we need to use
7:02
the map method and for each item what we
7:05
need to do is that this is the arrow
7:07
function. So inside this div we will
7:10
display each of the items.
7:13
So inside this item we will first of all
7:15
have h3. So which will be saying the
7:18
which will hold the actual item which
7:20
will be displayed on the screen. So now
7:23
basically you will see that if I refresh
7:26
our application.
7:30
So this is items sorry
7:34
uh if you see here this is items. So
7:37
current page data.
7:40
So for this uh
7:44
set current page data. So for this guys
7:47
for this to initialize we also need to
7:49
initialize the sweet pagination module.
7:52
So after this what you need to do is
7:54
that you need to import the sweet
7:56
pagination and
7:59
inside this this initializes uh you need
8:02
to pass some options inside this uh
8:05
module which is we need to set the
8:07
current page data which will be equal to
8:09
the set current page data method which
8:13
is initialized here. data per page how
8:17
many items you need to display on the
8:20
screen in one go. So this value will be
8:23
typically uh you can select any value. I
8:25
will display five items on the screen.
8:28
How you will get the data? So the data
8:31
is there inside the items array which we
8:33
have declared here. You will see that
8:35
now if I initialize it, you will see the
8:37
pagination is there. So it is displaying
8:39
the five items on the one page and if I
8:42
go to the second page it is displaying
8:44
the next five items. So it is similar
8:46
for that also. Some more options are
8:48
there which is navigation. If you want
8:51
the navigation part option you can also
8:54
put it to either true or false. The
8:57
default value is false. You can see
8:59
that.
9:01
And for the theme you can also have uh
9:04
theme also for the pagionation. So
9:07
various themes are available which is
9:09
style.1.
9:11
This is the first theme. This needs to
9:13
be surrounded in quotes.
9:18
So this is style one theme.
9:22
This has got the green background color.
9:24
If I change to style two, this will
9:27
change to the
9:29
blue one. If I change to the style
9:31
three, it will change to this theme like
9:34
this. This one. So there is also a
9:36
custom theme as well. If you want to
9:38
make it custom, just put a style dot
9:40
custom and right here inside your style
9:42
sheet just uh style it accordingly. So
9:46
just type here style custom and then you
9:49
can change the background color of it
9:53
just uh any CSS property you can have
9:56
black and then you can have important to
9:58
it. So this will change the background
10:00
color. If you also want to change the
10:03
color to white. So this will change the
10:05
color to white. So you can just
10:07
customize it accordingly.
10:10
So I have shown you how to do do this.
10:12
So whenever you hover onto this, this is
10:14
a pseudo class. If you want to change
10:16
the background color.
10:21
So let's suppose you can select any
10:23
color here and just make it as important
10:28
because it will not work if you don't
10:30
make it important. You will see that now
10:32
it will have this background color
10:34
whenever you hover onto it. So you can
10:36
just make it as custom as you want by
10:39
attaching the CSS classes to it
10:41
style.custom.
10:43
So this is the overall module guys. I
10:45
have given all the source code in the
10:46
video description. If you want that you
10:48
can go to the video description link and
10:50
copy all the source code. If you have
10:53
any sort of doubt inside this video you
10:55
can ask in the comment section. Uh
10:59
can I ask? So any questions guys I will
11:04
definitely answer those questions. So
11:05
you can ask in the comment section. I
11:08
will definitely try to answer those
11:10
questions. So if you have those
11:11
questions.
11:13
So Maher is saying awesome video. So
11:16
thanks Maher for appreciating the
11:19
efforts that I am putting here. So
11:21
please guys also join for every live
11:24
stream such as I'm uploading multiple
11:27
times a day. So for these awesome videos
11:30
for these awesome libraries that I'm
11:32
sharing with you especially React and
11:34
Angular. So I started this uh can you
11:37
teach about React 18? Uh definitely in
11:40
the future I will make videos on that
11:42
topic as well. React 18 I don't know.
11:46
Yes, I think React 18 is released. So
11:49
definitely I will make a video on that
11:51
topic as well. So definitely in the
11:54
future if you subscribe this channel,
11:56
hit the notification bell icon,
11:58
definitely in the future I will make
11:59
those videos. So we will look at new
12:03
features which are released in React 18
12:05
which will make the applications even
12:08
more uh good and uh effective. So
12:12
definitely I will make a full course on
12:14
that. So definitely don't worry about
12:17
it. I will cover each and every aspect
12:19
of it in detail and try to make awesome
12:23
applications. So I already subscribed on
12:25
you. So thank you very much for
12:27
subscribing the channel and also
12:29
[snorts] share my videos with your
12:31
friends so that more more and more
12:32
people can join in with these live
12:34
streams that I'm doing here. So
12:39
thanks M guys for watching this video
12:43
and I will be seeing you in the next
12:45
stream.