Use media queries with react hooks

hello everyone so today we're going to talk about react media and how to recreate its functionality with react Hawks in case you don't know react media is a react component that lets you use media queries inside to react code so just like that so if we bring react media to work on some box cutter so import from react media then we probably get it as a default import so if we wrap all content in a media component we use query and then we send a media query type so mean with let's say 600 pixels and then I surrender prop week a function gives us matches then if it matches you say return matches then we're under hello otherwise we render and now if we open and close we see that it changes so it's pretty simple and you can get it for free importing react media to your project but as we now have real cooks so I thought I share with you how how to create a hook that uses the same question like that react me guess so okay let's actually create our own hook here so we greet file we could use maybe a query top Jess this actually writes a hook so it's function use media query okay under reporting sport default use media query code so now same from Charlotte add that we have here we can get rid of react media and import use media query from user media and then cons much is use media query then we send the exact same thing here and then we say if it matches so if it matches that kinda cool so in Ingham bounine we are ready to go and now we're gonna implement or or use media query hook and for that we're gonna use window much media and this is a method that lets you see if certain query matches your people so we're gonna exactly use that um so what we're gonna do is we're gonna do Khan's media use that with max we're gonna get the query from the parameters then we have the media cool so now we need to actually listen for changes in the viewport so what we're gonna do is we're gonna use an effect so import import it from react use effect yeah now use effect function then every we want to listen to every time Kawara changes we want to execute that so actually let's put this inside because we want to see every time if it matches or not so we're gonna get that in a state piece so let's use u state from react as well and then this by default is going to be the value like matches so by default we are going to default which is equal star type that is default and now from here we're gonna get it is set matches cool so every time it changes who said we were gonna listen to the media so media dot at listener can we from here release so much is a method a listener move it's looking if we can instead of using a listener we can do give a listener but now that's actually from so add listener and then the listener saw the function that we're going to execute every time that that changes it's gonna be listen equals and then every time it changes were gonna set much is to media top matches which is a value that it gives us so here in the middle first we're gonna send that there and then we're gonna clean up every time component amount month we need to do media dot free move listener listener and then if the media doesn't match the current matches in the state then we need to set the matches to make our matches so if maybe I don't match is it's not same matches then set match is to myriad of matches and now we're getting here a message saying matches needs to be on the right abundances of Matias which is a beefsteak where is inside that makes sense and I think that is it if we save should be able to see that okay this is medium a cheese please clearly we need to return matches because otherwise we don't see it in in the other side so Talbot hello well hello world so you can see it's pretty simple just using the built-in browser functions we can recreate what react media does so that's it for today see you next time

Channel: Code With Alex

Views: 9,460

Rating: 4.5032678 out of 5

Keywords: react, hooks, media queries, javascript, react-media, useMediaQuery

Id: _Dm7jkJ75Zk

Length: 11min 24sec (684 seconds)

Published: Sun Nov 24 2019