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 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/
View Video Transcript
0:00
uh hello guys welcome to this video uh
0:02
so in this video I will show you yet
0:04
another package for p nation in react CH
0:08
so this package is called as sweet
0:10
pagination uh you can see we are again
0:14
getting example of
0:16
images so we are displaying images two
0:19
images per page so we are on the first
0:21
page the page is highlighted with this
0:23
nice little orange color you can
0:25
customize all these color combination if
0:27
I navigate to the second page the next
0:30
images will show the third page as well
0:32
so if you just go to npmjs.com uh just
0:36
search for this package Suite pagination
0:40
this is actually the name of the package
0:42
uh react component for pagination
0:45
command is simple you install this
0:47
package it's a fairly new package 74
0:51
weekly downloads but you can see you can
0:53
customize this uh uh color
0:58
combinations so so now after installing
1:01
it just make a simple functional
1:03
component and just you need to import
1:06
this package by using the import
1:08
statement so we simply say import suite
1:12
pagination and it will be coming from
1:14
Suite pagination package and then we'll
1:17
be importing all these six images which
1:19
are stored in my assets directory in the
1:22
source so I will just use the import
1:28
statement to import all the images so
1:31
you'll see one by one I imported all
1:33
these images now in
1:37
the state we need some a variable for
1:41
keeping track of the current
1:45
page so the initial value you will use
1:48
the use state will be one so when you
1:50
load the
1:53
page sorry this will be empty uh this
1:57
will be whatever
2:00
current page data sorry current page
2:03
data this will be an array so Set
2:06
current page
2:07
data so whatever data that you want to
2:09
page inate initial value will be
2:13
empty so then we will construct this
2:16
images
2:17
array so in this case we are looping
2:20
through the images that's why we will
2:23
pass all these six images inside this
2:25
images array now we come to the GSX
2:28
where we need to display this paging
2:33
so right here at the middle of the page
2:36
we have added all the CSS styles for
2:45
this so just format this so inside this
2:50
div we were looping
2:52
through this uh current image current
2:57
page data and we'll map through each
3:04
image and we'll pass the key parameter
3:07
which will be index The Source will be
3:10
image and I will just give it a style
3:13
attribute to each image just resizing
3:16
the image providing a width and height
3:21
and a border radius so if you refresh
3:23
your application you will see by
3:27
default no images will be displayed for
3:30
this we do need
3:32
to inside this Suite pagination we need
3:35
to embed this component and it actually
3:38
takes some parameters first of all your
3:40
current page data so this will be your
3:43
Set current page
3:46
data and get data
3:49
what piece of data you are paginating so
3:52
you'll be passing this images array and
3:55
here it takes a property which is data
3:57
per page so here you need to specify how
4:01
many items you want to display how many
4:03
images I will say
4:06
two and then it takes an option here
4:09
which says navigation so if you want the
4:11
controls you will say true so navigation
4:15
to true so now what happens you will see
4:17
these
4:19
controls so you will see that so the
4:23
navigation controls are
4:27
showing so all the source code of this
4:30
example is given in the description of
4:32
this
4:33
video so in this way you
4:38
can
4:40
easily Implement frontend pagination
4:43
inside react using the sweet pagination
4:46
Library so thank you very much for
4:48
watching this video and do check out my
4:50
website as well uh free mediat tools.com
4:53
uh which contains thousands of tools
4:56
regarding audio video and image and and
4:59
I will be seeing you guys in the next
5:01
video