Up next in 10
Build a React.js Pagination Component to Paginate Images With Controls Using sweetpagination Library
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/862deeb19299d7c86422d12bc2aea0a9
View Video Transcript
0:01
uh hello guys welcome to this video so
0:03
in this video I will show you a simple
0:05
react Chas pagination Library which is
0:07
used to paginate data which can include
0:10
text and images so in this specific
0:12
example I'm taking an example of images
0:15
so I have six images to display so what
0:18
I have done is that I am displaying two
0:20
images per page and you can see it has
0:23
created these three pages so we are on
0:25
the first page and total three pages are
0:28
there so we can navigate to the second
0:30
page and third page so if I go to the
0:32
next page the second page it the next
0:35
two images will show and lastly if I
0:38
click the third page the last two image
0:41
will show so this is a nice little
0:43
pagination Library specifically designed
0:45
for reacts application so the name of
0:48
the package is sweet pagin Nation so if
0:50
you go to npmjs.com
0:54
just search for this module which is
0:56
sweet pagination this is actually the
0:59
name of the module it's a pag Nation
1:02
react component
1:04
library and you just need to install it
1:06
I will show you the complete example uh
1:09
command is very simple you in install it
1:12
by executing this command and it's a
1:15
fairly new package 55 weekly downloads
1:18
and they do offer various themes by
1:20
default this will be the color
1:22
combination you can change it to this as
1:24
well this as well so they have got a
1:27
nice little
1:28
documentation I will show you the
1:30
complete example so first of all just
1:32
make a simple functional component and
1:35
then you need to import this package so
1:37
we use the import statement and then we
1:39
say site
1:43
pagination and it will be coming from
1:45
this package sweet
1:49
pagination and it's almost 18 kilobytes
1:52
this sweet pagination and after this we
1:55
are looping through the images so my
1:57
images are present in my assets
1:59
directory in the source so we have these
2:01
six images so one by one I will import
2:04
all these images using the import
2:07
statement so I will just paste this you
2:11
can take any data of your choice it can
2:13
be text images anything so we are
2:16
importing one by one from my assets
2:18
directory so after importing all these
2:20
images now I will come to the this
2:25
component and for this we need a simple
2:27
State variable to hold the current page
2:31
data for the paging Nation so this
2:34
single data variable is required for
2:37
this we will be using the US state Hook
2:40
and the initial value will
2:44
be empty
2:46
array so by default we are declaring the
2:49
state variable where we'll be holding
2:51
the pagination data by default it's a
2:54
empty array and then we'll be holding a
2:57
images array where I will simply
3:01
declare image one so we'll basically
3:03
paste all the images that we imported
3:05
and create a simple array so all the six
3:08
images will be there in this array so
3:11
one by one we imported all this so now
3:14
we have this images array so now we come
3:16
to the jsx so wherever you need to do
3:19
the pagination we will style it simply
3:21
by aligning this in the center position
3:24
and just give it a simple padding of 20
3:28
pixel so this will make it in the center
3:31
position I just give it a H1 tag image
3:35
pagination and then I will simply give
3:37
it a another div and this time I will
3:41
change the styling to display to
3:44
flex so this is I just doing it for
3:46
styling the pagination this is not
3:48
required but just required for styling
3:52
it little bit more justify content to
3:56
Center and I will have a gap of
4:00
around uh 10 pixel and flex wrap I will
4:04
change this
4:05
to wrap that's all that we need to do
4:09
and inside this we will Loop through the
4:11
current page data and we will
4:17
map each image like this in this we will
4:21
have this image tag and I will just give
4:23
it a key parameter which will be equal
4:25
to index Source will be equal to the
4:28
image
4:31
and then I will just give it a style of
4:34
width of 200 pixel the image and height
4:37
of 150
4:39
pixel like
4:41
this and I will also give it a border
4:44
radius of 8 pixel that's all that we
4:48
need to do and
4:50
just if you just see now uh refresh your
4:55
application you will see this heading
4:57
will be showing but you will not see the
5:00
images for the images to show we do need
5:03
to add the pagination component that we
5:06
imported if you see Suite
5:08
pagination so at the bottom side after
5:11
you do do this we need to embed the
5:13
pagination so we simply write the
5:16
component name and it actually takes
5:18
some parameters the first parameter it
5:20
take is the current page data
5:23
variable and this will be we'll see set
5:26
the use this hook function that we
5:28
declared currently the images will be
5:30
empty you'll be using this hook function
5:33
and passing it the second parameter is
5:35
take is the get data so which images
5:38
that you want to display so we are
5:40
displaying this images
5:42
array we are simply passing this so this
5:44
is our data it will be coming from
5:47
database or API by default in this
5:50
example I'm just declaring a static
5:52
array which contains these six images
5:54
and we have this images array and we are
5:56
simply passing this to this par
5:58
component and then data per page this is
6:02
actually a parameter it takes so how
6:05
many images you want to display per page
6:08
so I will be displaying two images and
6:11
then if you also want the navigation you
6:13
will set it to true so the navigation
6:15
controls will also be there if you try
6:18
to refresh now you will see instantly
6:21
images will show and also you will see
6:23
that three pages have been automatically
6:25
created for the pagination so we are on
6:28
the first page if if I navigate to the
6:30
second page you will see the next two
6:31
images if I navigate to the third page
6:34
you will see the next two images so in
6:36
this way guys you can actually make a
6:38
nice little react pagination component
6:41
which will be able to paginate your
6:43
images very simply I have given all the
6:47
source code which I have used in this
6:49
video in the description of this video
6:51
so if you want this full source code you
6:53
can go to the description and get the
6:56
source code and copy paste it so thank
6:59
you very much guys for watching this
7:00
video and also check out my website as
7:04
well free mediat tools.com uh which
7:07
contains thousands of tools regarding
7:10
audio video and image and I will be
7:13
seeing you guys in the next video
#Online Video