Every Big React App Needs These 5 Custom Hooks

this video covers everything from dark mode internationalization cookies and so on [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you and today i'm going to be doing that with five more react hooks and you definitely want to watch all these especially the last one on translations because that hook is incredible but to get started we're going to be using the use click outside hook which is one that's great for things like modals so first we have our component our click outside component we have an open and set open state and we have a reference to a modal and then we're calling that use click outside we're passing it our modal and we're saying hey if our model's open we're going to close it whenever we click outside of our modal reference and down here we have a button to open our model and we have this giant div which is just a modal it's just a giant blue rectangle and this is where our modal ref is put so as you can see if we open it our model is open and if we click inside of our modal nothing happens but as soon as i click outside the modal it closes the modal that's what this use click outside hook does as you can see all we're doing is using this use event listener hook that we created in a previous video i'll link in the cards for you and description down below we're setting up a click event listener and we're doing it on the document and this function all we're doing is we're saying hey is our current reference equal to null or is our current reference inside of the thing that we clicked on or the thing that we clicked on if so just return otherwise call the callback function with the event so all this does is say hey if we clicked inside of this thing do nothing otherwise if we clicked outside of it all the callback and that callback here is just making our model closed this is a super simple hook that's great for things like modals but there's tons of other use cases where you're going to want to use this hook so it's great to have in your back pocket because it's so much easier just to use one line instead of writing out all this complex code and the next hook i want to talk about is called use dark mode and this is a hook that is pretty much in every application that you can think of is going to have a use for this dark mode hook so if we look at our dark mode component you can see that we have our use dark mode and you can see it's dark mode and set dark mode so we can toggle it and we can actually have our dark mode and then whenever we click on this button i just want to toggle our dark mode and we just have some styles based on that dark mode variable so when i click on this you can see that my web page targets between light and dark mode and the best part is is when i refresh my page it actually saves whatever my latest thing is so i left it on dark mode so it stays dark if i leave it on light mode it'll stay on light mode that's because it's persisted in local storage if we go to use dark mode you can see we're using our local storage hook for dark mode and we can see that we can set our dark mode and then what we're doing this is awesome is we're using this use media query hook here and we're saying prefers color scheme dark so if the browser for the user is set to prefer the dark color scheme we're going to have preferred dark be set to true that way the first time they come to our website is going to default them into dark mode or it's going to default them into light mode if they don't prefer dark mode and down here all we're doing is we're saying okay have they explicitly set light or dark mode yet using this set dark mode function if so use that otherwise if they haven't set that yet we're going to default to whatever their browser settings are and then every single time that we change dark mode to light mode or light mode to dark mode we're just going to be taking a class on our body and toggling that dark mode class and that's because if we want to change our background color of our body for example we need to use this class so you can see our background color changes to this dark color in dark mode and in light mode it's just a default white color that's what this body css does and that's how we're getting this toggle effect so the main thing that's happening is first we default to the browser setting that they have set otherwise we default to whatever they specifically set in our application and we're just toggling that on our body this is an incredibly powerful hook and you can really use this for specific themes if you want so if you want multiple themes you can have like a used theme hook which is very similar to this we're just using dark mode because that's kind of the most common theme you'll see is having a dark and a light mode for a website and this makes it really easy to swap between your themes and to use your theme only where you need it now the next hook i want to talk about is going to be another really simple hook but one that you see all over the place and that's having the functionality to copy to clipboard all the time when you're on websites you're going to find a button that's like hey copy this secret key to the clipboard or copy this password or copy something to clipboard and that's what this hook does as you can see we call use copy clipboard and this gives us a function called copy to clipboard as well as some information for example success as this was a successful copy or not and then we can call a copy to clipboard with the text we want to copy so whenever we click on this button here it's going to copy the text this was copied so right now i'm just going to copy this text called copy text as you can see when i paste it's pasting copy text if i click this button right here now when i paste you can see it paste the text this was copied which is what's inside of that copy to clipboard function and you can see that the button is changed to copied and that's because success is true so now the text has been changed here to copied so if we look at the hook it's actually really straightforward because we're using this copy to clipboard library which does all the hard work for us as you can see we have a value state and a success state which we're passing down so we can see what has been copied and if it was successfully copied and then here we just have our copy to clipboard function which is a super simple function and all this function is doing is taking in a text and it's taking in some options and it's just saying hey call the copy function from copy to clipboard with our text and our options and then this result is true or false so if the result is true save the value we copied and then set success to either true or false depending on if the copy was successful or not again this is something that you're going to see all over the place across different websites and having just a simple hook that you can use like a one liner like this makes this copy functionality so much easier to work with the next toke i want to talk about is for dealing with cookies and again cookies are a real pain to work with but having a hook to manage them for you just makes it so much easier let's open up the code for that real quick we'll look at our component first you can see we are using a cookie this cookie has a name of name and it has a value a default value of john as you can see it's printing out john over here and we have the value and update function and remove function so here we have value and we have a function where we click on it it'll update the name to sally and we have a button where we click on it it will delete the name so if i click change name to sally you can see it changed to sally and when i refresh it now is still persisting as sally because it's saved in our cookies if i click delete it's going to remove that cookie and when i refresh it'll default to john because that's our default value if there is no cookie at all so if we look at this used cookie you're going to see we pass in the name the default value and inside of our use state what we're doing is we're saying hey is there a cookie already there we'll do our cookie to get and if there is a cookie we're going to return that otherwise we're going to set a new cookie with that default value and return that default value this cookies object comes from a library called jscookie which just makes working with cookies easier because doing document.cookies is a huge pain now we have our update and our delete functions which are really straightforward we pass it in a new value and some options for example like an expiration time we're just going to set the cookie with the given name to the new value and we're going to set our value for like our internal react state to that new value and on delete same thing we're just removing the cookie with a given name and we're setting the value to null and then we're just returning all three of those things the value and the update and delete function so this is some super straightforward code very similar to like used local storage or use session storage and it means that we can now use cookies in our application incredibly easily which is something that's great when you need to do like authentication or send information to the server through these cookies now the final hook in this video i want to talk about is in my opinion the most useful and my favorite hook and that's the used translation hook so we're going to first look at the component and then we're going to actually look at the hook itself because this one's a little bit more complex than some of the stuff we've talked about so far so let's comment that in place here and we're going to look at the component as you can see this component is just a used translation hook it doesn't take in any information and it returns to us a bunch of information this actually isn't even quite everything it returns you can see it returns to this the language that we're translating you can see we can set the language we want to translate to we have a fallback language so let's say that we don't have a translation for that word it'll fall back to the fallback language and then we have t and this is a function we call whatever we want but t is kind of a standard name for it and that allows us to translate something from a name into an actual real world text and down here we're printing out the language a bunch of different translations and then we can change our language to spanish or english with these buttons down here if we go and we look at our used translation hook we can kind of see what's going on behind the scenes you can see we're storing the current language and we're also storing our fallback language in local storage and we're just defaulting them to english for now you can change that to whatever you want but we're going to default to english by default then we have a translate function and this translate function is going to take in our key and since our key can be a nested key we want to be able to split on the dot and we want to get the nested translation so for example here nested.value is going to be a nested object we want to translate out and inside of here we're just getting the values for those different languages and we're saying hey do we have a value for our language if not give us the value for the fallback language and if we don't have any fallback language just give us the key as the absolute worst case scenario then we'll return all this information down here so the way this works is we have this translations folder and as you can see we're importing all of our translations up here into this translations variable that's importing from our index.js file here and here we have an export called en which handles all of our english translations and we have one sp which handles all of our spanish translations and these names en and sp are the exact same names here we're setting for our language s p and e n that's really important then inside of our translations you can see we're translating the text hi to hello the key by goes to goodbye and we have this nested value which is a nested json object translates to test so now if i go to my component you can see high prints out hello i prints out goodbye and this nested value is printing out test just like we expect if we go to spanish for example you can see we only have a translation for hi so when i change to spanish you can see that hello up here has translated to ola but goodbye and test don't have a spanish translation so it's using the fallback language which in our case is english as you can see instead of our used translation our fallback language here is english now if we wanted to change our fallback language we can just come in here we can say set fallback language and let's say we want to set our fallback language to spanish and we're going to say change all back blank there we go so now if i change our fallback language to spanish you're going to see that now this says buy and nested value and that's because inside of use translate here we don't have a translation for spanish and our fallback language is also spanish we don't have a translation for it so it's just printing out the key and that key here is buy or it's nested dot value so this is a super easy way to do translations all you need to do is add your translations to these json files here and those translations are automatically going to be picked up by your application and anywhere you want to use them you can just put in this used translation hook it's super useful in my opinion and this hook alone is one of the best hooks you can add to any application that's going to scale globally now if you enjoyed this video you're going to love the four other videos i've done on this topic i'll link them over here and down in the description below with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 31,632

Keywords: webdevsimplified, react hooks, react custom hook, custom hooks, react custom hooks tutorial, react hooks tutorial

Id: XEQ9nEHYIbw

Length: 10min 36sec (636 seconds)

Published: Tue Oct 12 2021