Up next in 10
React.js Tutorial to Zoom & Magnify Over Images on Hover Using react-image-zooom Library in JSX
38 views
Apr 1, 2025
Get the full source code of application here: Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 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:03
so in this video I'll show you a react
0:05
CH uh plugin which allows you to zoom on
0:09
top of the images so if you're viewing
0:12
any sort of image inside react chairs if
0:15
you want to zoom on the image you can
0:18
use this Plug-In or Library so if you
0:21
hover onto the image you will see you
0:23
will be able to zoom the
0:26
image so if you want to see the portion
0:28
of the image just simply click on that
0:31
and then the image will be zoomed you
0:34
can control the zoom level as well and
0:36
the width and the height all these
0:38
things are customizable let me show you
0:40
the plugin right here the name of the
0:43
plugin is this one image
0:45
Zoom the command is simple react image
0:49
Zoom this is a
0:53
command z o m npmi react image z o m so
1:01
it's a fairly popular package almost
1:05
4,000 weekly downloads so now to use
1:08
this module it's very easy uh you come
1:10
to your react CH
1:13
application and this is a very simple
1:16
react CH component so first of all we
1:18
need to import the component at the top
1:21
so we simply say Rea image
1:25
Zoom which will be coming from
1:27
react image Zoom so in this way you
1:33
first of all import the module so after
1:36
importing this module we simply use this
1:39
module we simply say image
1:45
zoom and it actually takes a series of
1:48
options first of all it takes the
1:50
source and here you can basically paste
1:53
any image from internet so I'm just
1:57
pasting this image after that here you
2:00
need to specify the zoom
2:02
level it can be anything I'm just
2:05
providing here 200 if you
2:08
refresh
2:11
application just make sure that you
2:14
loading image which are accessible let
2:16
me paste the
2:20
URL so as soon as you paste the URL you
2:23
will see the image will load and as soon
2:25
as you click on that image the image
2:28
will be zoomed and you will be able to
2:30
zoom so this is the zoom level that we
2:32
provided is 200 we can change this to
2:36
500 zoom level so now what happens if
2:38
you simply click on the image it will be
2:43
zoomed here you will see that it's a
2:46
fairly good react Chase package so you
2:49
will be able to zoom on the image again
2:52
click it will zoom out again click it's
2:54
zoom in you can see the zoom level we
2:58
can even change this to let's suppose
3:00
th000 so it will again Zoom more so as
3:04
soon as I click you will see it is
3:06
zooming a lot
3:08
more so you can magnify your images on
3:12
on click in react chair it's a fairly
3:14
good package and then we can even
3:18
provide full screen mode as well so if
3:21
you want the full screen full width you
3:25
can set this option to true so now the
3:28
zoom level will be full
3:31
screen so you will see that and you can
3:35
even control the width of the zoom level
3:37
so let's suppose you only want width to
3:39
be 50 height to be
3:41
50 so you can just
3:44
control the image width you can see
3:48
that so you can provide any Dimension
3:51
right here
3:59
so it's a fairly good
4:02
package really good for zooming in
4:05
images hover magnify images it's a
4:08
fairly good you can all these things are
4:10
customizable you can change the url of
4:12
the image customize the width and the
4:15
height and the zoom level of the as well
4:18
so this is a package guys you can
4:20
definitely use it in react CH
4:22
application I showed you a complete
4:24
example uh thank you very much for
4:26
watching this video and also check out
4:28
my website fre mediat tools.com uh which
4:32
contains thousands of tools regarding
4:34
audio video and image and I will be
4:36
seeing you in the next video