live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React.js Image Zoom Feature with Click and Pinch to Zoom Using react-quick-pinch-zoom
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a library
0:04
inside react CH which can be used to
0:07
actually allow the user to zoom in
0:10
inside the images and zoom out so this
0:13
is actually the
0:14
library so you can see if I tap on the
0:18
image it is actually zooming in inside
0:21
the image and also it can zoom out as
0:24
well so in this way you can toggle the
0:28
zoom kind of an
0:31
effect and you can basically do this for
0:35
any image and when the user clicks on
0:37
the image the image will zoom in and
0:41
like this this is actually the module
0:43
specifically designed for react Chas
0:45
applications if you have an image that
0:47
you want to display to the user and when
0:50
the user Taps on the image the image
0:52
will zoom in something like this so the
0:55
actual name of the package is react
0:57
quick pins Zoom
1:00
so if you just go to npmjs.com and just
1:03
search for this package the very first
1:06
package which comes the name of the
1:08
package is react quick pinch
1:15
Zoom so it is almost having 23,000
1:18
weekly downloads so this is actually the
1:20
command I already installed it so I will
1:24
just show you a very basic example so
1:27
first of all just make a simple
1:28
functional component and then we just
1:31
need to include this using the import
1:34
statement so we write import and it
1:37
contains this component quick pinch
1:41
zoom and it also contains this function
1:44
make 3D transform value it all will be
1:48
coming from this package which is react
1:50
quick pinch Zoom so almost it is a size
1:54
16.33%
1:59
from
2:00
it and now we will need a image that you
2:03
want to display so you can take any
2:05
image URL from the internets and we will
2:08
be displaying this
2:11
image and now to display this image we
2:14
need two variables two State variables
2:17
first is the reference to the image for
2:19
this we'll be using the US ref hook
2:22
inside react GS and secondly for
2:24
controlling the scaling to keep track of
2:27
how much zoom in the user zooms the
2:30
image so for this we will have this UST
2:33
State variable initial scaling value
2:35
will be
2:36
one
2:38
so it is just to control the zoom level
2:41
of the
2:47
image and now we will be embedding the
2:51
actual component so now the component
2:55
name is quick pinch
2:58
zoom and inside this you will embed your
3:01
image so whatever image that you want to
3:03
display in the source parameter you'll
3:05
be putting the image
3:07
reference and the actual source of the
3:10
image which is inside image
3:14
URL so if you just do this if you don't
3:17
pass any options just embed this image
3:19
and just see in the browser it will look
3:21
something like this so the image is
3:24
looking something like this it is just
3:26
displaying it but when I tap on the
3:28
image nothing happens
3:30
for configuring the zoom level we do
3:33
need to add a onclick listener to this
3:36
image so we just need to bind a on click
3:39
listener so when we click on the image
3:41
we need to zoom inside the image so for
3:44
this we will be binding this custom
3:46
function which will execute whenever you
3:48
click on the image handle click so now
3:51
what this function will do I just want
3:53
to Define this function right here
3:55
handle click so inside this function we
3:58
need to zoom inside the image for
4:01
zooming it we have this function set
4:04
scale which we have declared we are
4:06
using this function hook function so
4:09
whatever is the previous scale value we
4:12
will increment
4:13
this inside this callback function so we
4:17
need to toggle the new zoom level so
4:20
what we will do we will declare a new
4:23
new scale and whatever is the previous
4:26
scale if it is equal to one then we will
4:29
be doing it to two if it is already two
4:33
then we will make it one so we are just
4:35
using this terity operator we are having
4:37
this condition that if the previous
4:39
scale has is one then increment it to
4:41
two if it is already two then in
4:44
decrement it to one so after this we
4:49
first of all need to get the reference
4:50
of the image so we can
4:54
destructure like this from the image
4:58
reference and and then we can
5:04
actually manipulate the transition and
5:06
we can applying we can apply a simple
5:09
transition to the image transform and
5:12
here you can customize this we are using
5:15
0.3 second and easing so for the zooming
5:18
effect it will take 0.3 second to
5:22
complete and then we will actually zoom
5:25
in the actual image so for this we'll be
5:28
manipulating the transform proper prop Y
5:30
and we will scale it to the actual new
5:34
scaling property which is new
5:37
scale so it will apply the zoom and
5:41
after that we will return this new
5:43
scale from this
5:50
function
5:53
so if you now try to click on the actual
5:57
image again nothing happens we again
5:59
need need to inside this parent
6:01
component that we using this from this
6:04
package we do need to configure a
6:07
function uh when the zoom level updates
6:10
we need to bind this on update
6:13
function so there is this on update
6:15
function available so I will Define this
6:19
custom
6:21
function so what this function will do
6:24
on update will actually Zoom the image
6:27
so inside this function on
6:31
update we will use the use callback hook
6:34
and inside this we will have the x
6:37
coordinate the y coordinate and the
6:41
scale and inside this we will get the
6:43
reference of the image like this from
6:46
the image
6:48
reference after getting the reference we
6:51
will simply use this function which is
6:55
available make 3D transform
6:58
value and inside this we will simply
7:01
pass the actual x coordinate y
7:04
coordinate and the scaling
7:06
part and then image. style we will set
7:09
this
7:10
property this function which is
7:12
transform to whatever is the
7:16
value and this will have square brackets
7:20
so this completes the configuration part
7:22
so if you
7:25
now all the source code will be given in
7:28
the description so if you try to
7:31
now click on the image you will see the
7:34
image will zoom in and you can actually
7:38
zoom in zoom out all these
7:40
functionalities will be present so you
7:42
can do this for any image inside your
7:43
react CH application you can zoom in
7:45
zoom out using this
7:48
package
7:50
so it's a very handy package it's
7:53
a it's useful for zooming in zooming out
7:57
of the image
7:59
so thank you very much for watching this
8:01
video and do check out my website as
8:03
well free mediat tools.com which
8:06
contains thousands of tools regarding
8:08
audio video and MH and I will be seeing
8:10
you in the next video