Up next in 10
Build a React.js Image Zoom Feature with react-medium-image-zoom Library and State Management
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 plugin
0:05
inside react CHS which allows you to
0:07
zoom inside images and you can zoom in
0:11
zoom out so this is actually the plug-in
0:14
here so there is a image out there which
0:16
you can simply view it by clicking on
0:18
the image and the image will zoom in and
0:21
you can actually clearly see the content
0:24
of the image this is specifically built
0:27
for react CH so if you have a image
0:29
which you are displaying it inside your
0:31
react CH application you can simply
0:33
configure this plugin and if the user
0:36
clicks on the image then the image will
0:38
be zoomed in and they can clearly see
0:40
the content of the image so this is
0:43
actually the plug-in and the name of the
0:45
plugin is react media medium image
0:49
Zoom so if you just go to npmjs.com and
0:54
just search for this Library which is
0:57
react medium image
1:00
Zoom so this is actually the name of the
1:05
package so it is almost having
1:10
95,000 weekly downloads so it's a pretty
1:13
popular package and this is actually the
1:16
command here npmi react medium image
1:18
Zoom I have already installed it so I
1:21
will just show you a very basic example
1:24
on how to configure this so the very
1:28
first thing you need to do you need need
1:30
to import this package so I will make a
1:34
simple functional component and just
1:36
using this import statement at the
1:39
top we will import this plug-in so
1:42
import and there is this
1:45
controlled function which is available
1:47
and we'll be importing it as
1:50
control Zoom so we are importing this
1:53
method as control Zoom which is
1:56
available from react medium image Zoom
1:58
package and it also needs to we also
2:02
need the CSS file of this plugin so we
2:05
can easily import this using react
2:09
medium image zoom and it contains a disc
2:12
folder and inside this we need to import
2:15
this styles. CSS file so we are simply
2:18
importing the CSS file as well of this
2:21
plugin so after that we just need to
2:24
display the image file and we just need
2:27
a simple State variable which will be
2:30
responsible for keeping track of how
2:32
much Zoom the user will apply and this
2:35
will be a Boolean parameter initial
2:37
value will be false so the this is just
2:39
to keep track of whether the image is
2:41
zoomed zoomed in or not so initially it
2:44
will be false and now inside the jsx we
2:48
need to render this uh component which
2:51
will be inside controll
2:55
zoom and inside this you need to put
2:57
your image whichever image that you want
2:59
to configure so you'll be taking this
3:02
image from the internet so you can take
3:05
any image from the URL
3:08
so let me go to unsplash.com and just
3:13
grab one image from the URL so if you go
3:17
to it you can pick any image from
3:21
here just copy the image address and
3:24
paste it in the source
3:27
parameter so it also takes some par
3:29
parameters this plugin so the very first
3:32
parameter is take is is zoomed and it
3:35
will be equal to the
3:37
value initial value is false here so we
3:40
are simply putting whatever is the value
3:43
and whenever when you whenever the zoom
3:46
level is changed this call back function
3:48
will execute and here we'll be executing
3:50
this custom function which will execute
3:53
whenever you zoom the image so this
3:55
handle Zoom change function this
3:58
function will get
4:00
executed whenever you zoom the image so
4:03
inside this function it
4:05
actually you will use the use callback
4:08
hook and inside this you will have this
4:11
U variable
4:14
passed and you'll be setting this
4:17
variable
4:19
from whatever is the value coming right
4:22
here it will be a Boolean parameter so
4:24
if you zoom the image this will be true
4:26
so we are simply putting the true here
4:28
in this making it from false to
4:31
true so this will be empty
4:34
function so that's all that we need to
4:37
do and if you refresh your application
4:39
now and go to the application and this
4:41
is the image which is showing right here
4:43
and if you pinch if you click on this
4:46
image you will see the image will zoom
4:48
in and you can see the clearly the
4:50
content of this image and once again if
4:52
you zoom out it will be zoom out so once
4:56
again you click the image the image will
4:58
be popped in
5:00
so in this way you can configure this
5:02
plugin for zooming in out of a
5:04
particular image inside your react CH
5:06
applications using this
5:09
plugin and you can even control the
5:11
width of the image as well
5:14
so there is also a property you can pass
5:17
which is the width of the zoom so I can
5:20
pass here 300 so this will be the width
5:23
level of the zoom so you can control the
5:25
sizing here as well and there are a lot
5:29
more options available in this plugin
5:31
you can read more about it in the
5:32
documentation so this is just a very
5:35
simple example that I have shown you
5:37
apart from that you can even control
5:39
some more properties about that you
5:42
can control all these custom CSS
5:44
properties as well if you want to make a
5:46
custom Zoom but
5:49
essentially this plug-in does this thing
5:52
very simple thing of zooming in inside
5:55
the
5:56
image and whenever you click on the
5:58
image it will Zoom doain like this so
6:02
thank you very much for watching this
6:03
video and if you like this video then
6:05
please hit that like button and also
6:07
check out my website as well free mediat
6:09
tools.com which contains thousands of
6:12
tools regarding audio video and image
6:15
and I will be seeing you in the next
6:17
video
#Consumer Electronics
#Programming