0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a ReactJS
0:04
module which allows you to do media
0:07
queries inside your ReactJS application
0:09
depending upon the screen size we will
0:11
be able to show and hide HTML elements
0:14
so as you can see on the desktop screen
0:17
the menu is showing like this but when I
0:20
basically uh reduce the screen size you
0:23
will see the it will change into
0:24
hamburger menu and now this menu appears
0:28
like this so I will show you there is a
0:30
specific package here which solves this
0:33
problem of uh hiding and showing
0:37
elements on screen size when the screen
0:41
becomes low we can show and hide
0:43
elements so there is a package for this
0:45
if you go to npmjs.com just search for
0:48
this package react use media this is
0:51
essentially a hook which allows you to
0:54
just find out the size of the screen
0:58
dynamically so this is actually the
1:00
module the command is very simple you
1:02
simply install this and it's fairly new
1:05
package and but it returns the screen
1:07
size according to you you can set the
1:10
minimum width you can set this width and
1:13
then it will dynamically
1:16
change as the screen meets the
1:18
requirement it will show and hide
1:20
elements so let me show you a complete
1:22
example uh all the source code will be
1:26
given in the description of this video
1:28
so you can refer my blog post for full
1:30
source code so first of all we make a
1:32
simple functional component and then we
1:34
simply require this module using the
1:36
import statement like this use
1:41
media which will be coming from this
1:44
package react use media so in this easy
1:47
way you can require this package using
1:49
the import statement and after that you
1:51
just need to declare the variable where
1:55
you specify the width of the window
1:59
using this hook so here we can specify a
2:04
width so we can specify the minimum
2:06
width to be around 800 pixel so we
2:10
specify this variable using this hook
2:13
use media which is coming from this
2:15
package and now in the JSX wherever you
2:18
need to display elements dynamically we
2:21
can actually put a style here of uh
2:30
flex and then we can set a minimum
2:36
100 vertical height and inside this we
2:39
can basically check if the screen size
2:43
is almost uh smaller than or equal to
2:50
case we need to show something and if
2:53
the screen size is uh smaller than then
2:56
in that case we need to show something
3:00
so now here we can dynamically show
3:04
elements so it can basically show this
3:11
menu which will be the desktop
3:14
size you can see that
3:17
so this will show on the desktop screen
3:21
the screen which is greater than or
3:24
equal to 800 but if the screen size
3:26
becomes smaller than 800 then in that
3:30
case we will change the menu to
3:33
hamburger like this so this we are using
3:37
a turnary operator here like this if you
3:39
see so now we have a condition right
3:42
here we are checking it if the screen
3:45
is greater than or equal to 800 then we
3:48
are showing this or else this if you
3:51
refresh your application what you will
3:53
see this is your desktop
3:56
screen and as soon as I responsively
3:59
reduce the size you will see it will
4:01
change to toggle menu see this is the
4:07
view so in this easy way guys you can
4:10
build responsive websites in React using
4:14
package react use media you can use this
4:17
package it essentially does the media
4:20
queries of CSS dynamically so thank you
4:23
very much for watching this video and
4:24
also check out my website
4:26
freemediatools.com which contains
4:28
thousands of tools regarding audio video
