videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a React.js Project to Zoom,Pan & Pinch HTML Image Elements Using react-zoom-pan-pinch Library
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 chairs where you can pan
0:06
and zoom inside a particular image so if
0:09
you want to zoom in inside the image or
0:13
inside the particular section you can
0:15
directly use your mouse and you can zoom
0:17
in using this package inside react
0:20
chairs so I will show you this package
0:23
you can even have the controls as well
0:25
for zooming in so we can have various
0:28
buttons as well but which or you can
0:31
directly uh scroll using the mouse to do
0:36
the zooming right
0:37
here so the actual package name is react
0:42
Zoom pan pinch if you just go to
0:45
npmjs.com and just search for this
0:48
package which is react pan
0:52
Zoom pinch uh this is actually the
0:56
package the command is very simple so
0:58
simply install this by executing this
1:00
command I've already installed it so
1:02
it's a very popular package almost
1:06
322,000 weekly
1:08
downloads and now I'll be showing you a
1:11
very simple example so just make a
1:13
simple functional
1:15
component and you import your image file
1:20
whichever you which whichever image you
1:22
want to import so my image is present
1:24
inside the assets
1:27
folder you can take any image of of your
1:30
choice so my image is present if you see
1:33
in the assets folder in the source we
1:35
are loading this image and just
1:38
requiring it is using the import
1:40
statement so also we need to require the
1:43
package as well so we have three methods
1:46
available inside this package which is
1:49
transform
1:50
wrapper and then we also have the
1:53
transform component and thirdly we have
1:56
the use controls so these three
2:00
components are required using this
2:04
package and now I will just declare a
2:06
simple State variable for keeping track
2:09
of how much Zoom the user will zoom in
2:13
and zoom
2:15
out and we have reset transform so all
2:19
these will be coming
2:22
from this is essentially we are
2:24
destructuring it to require only these
2:28
three methods which are available from
2:30
this use controls hook it's essentially
2:34
it's a hook which we are requiring it
2:36
from this package and it contains these
2:38
three methods for zooming in zooming out
2:41
and reset transform so these are the
2:43
three methods now in the jsx we will
2:46
have all these controls available to us
2:50
so we will have the first button
2:54
for zooming in
3:02
so I will just make it everything in the
3:04
center position
3:06
so just give it a display property I
3:10
will change it to flex and justify
3:13
content to
3:15
Center so this will be the zoom in
3:17
button then we have the zoom out button
3:20
as well I will just bind on click
3:23
listener to it so whenever you click the
3:25
button we call this directly this
3:28
function zoom in function
3:30
and same goes with the zoom out as well
3:33
we call the zoom out function now so
3:35
zoom
3:37
out and the third
3:40
button for resetting the coordinates so
3:45
we if you want to reset everything we
3:48
call this function so we we can already
3:52
bind this on click
4:00
so if you refresh now you will see these
4:02
three buttons appearing
4:08
uh now we also need to show the actual
4:11
image for showing the
4:15
image we just need to wrap everything
4:18
inside
4:19
uh this is actually a component we need
4:22
to wrap everything inside this transform
4:26
wrapper this is necessary because inside
4:29
this package if you want to zoom in zoom
4:33
out you need to wrap everything inside
4:35
these tags this is a opening tag this is
4:38
the closing tag so this is actually the
4:40
parent component so we need to wrap
4:43
everything and this takes some options
4:45
first is the initial zoom level so
4:48
initial scale value you will put it to
4:50
one and then initial position
4:54
X you can put 200 and then initial
5:00
y coordinate you will say 100 these are
5:03
the coordinates and the zoom level
5:04
initial whenever you load the image
5:07
which coordinates are there so inside
5:10
this it actually now to show this
5:14
image we have these three methods which
5:17
is zoom in zoom
5:21
out and reset
5:28
transform this is
5:30
essentially here you will
5:33
embed this code so you can transfer
5:36
every every everything here which you
5:38
have written inside these
5:41
brackets so we are simply calling these
5:44
three functions if you see zoom in zoom
5:46
out reset
5:47
transform so if you refresh
5:51
now now do actually also show the
5:55
image after this we put our transform
6:00
component as
6:01
well now here you need to attach your
6:05
image so inside your Source you attach
6:08
the image we imported this image and we
6:11
will just give it a image styling of
6:14
width of 500
6:16
pixel and height of also 500 pixel
6:32
sorry this image needs to be contained
6:33
inside this tag which is transform
6:38
component so just need to write this
6:41
image inside
6:44
this let me see if it is saying
6:47
transform context must be placed inside
6:50
transform
6:55
rapper all the source code I have given
6:57
in the description so what
7:01
you can see we have written a separate
7:03
component for the controls and here we
7:05
have included this parent transform
7:09
wrapper and here we are showing this
7:11
image and if you
7:15
refresh so now you will see the image
7:18
will show and you can directly zoom in
7:20
zoom out using your mouse
7:23
scroll so it's very easy you can see
7:27
that you can directly use your mouse as
7:29
to scroll to zoom in zoom out and on
7:33
mobile devices if you tap on the mobile
7:35
screen then the image will zoom in so
7:38
it's a nice little package uh
7:40
essentially inside application if you
7:42
are displaying some kind of image it's
7:44
necessary you need to allow the user so
7:47
that they can directly zoom in so this
7:50
package will be useful in those
7:51
scenarios
7:53
so this was a tutorial on this on how to
7:56
zoom pan and pinge on HTML element in
7:59
easy way inside react chairs using this
8:03
package so thank you very much for
8:05
watching this video and do check out my
8:07
website as well free mediat tools.com
8:10
which contains thousands of tools
8:13
regarding audio video and image and I
8:16
will be seeing you in the next video
#Programming
#Software