Fax Initialized Conditional with airSlate SignNow

Fax initialized conditional

hello everyone and welcome back to my channel my name is Harry wolf and this is the joy of coding I got a quick little follow-up from the previous video that I made writing our own custom react hook for making a global event listener everything about that was great if I do say so myself but there's a few other things I wanted to extend in that custom Hulk that I didn't really have the time to squeeze in to that one video hence a new fun video primarily what I want to do is add additional configuration behavior to this use event listener if you don't remember this use event listener from last video it looks like this where you can add a nice cool click handler when you use it things work as expected here count that's right okay what I want to do first is let this use event listener be conditional such that it is either enabled or not and that's one of the big pain points with react hooks is that they cannot be conditional due to the way that they're implemented internally into react they're the order the order in which the hooks exist in a component have to be consistent across renders so you can't so let's actually do this here and your button or just say set enabled e I'm just gonna make this do not e I'm gonna say enabled I need a string needles and then that was really pegged way of saying enable set a nail equals e States true right so that's toggling as expected here and got some nice little beautiful CSS and able to row false so that means that I can't really do if enabled move this inside there this is going to be mad at me it's called conditionally we have hooks must be called the exact same border and every component rendered stop to know go what I could do is I can move this if inside here right if I wanted to such that when the handler is called right so this is I'm Lowell that's the little handler when I turn it false and I click nothing happens but this event listeners still exists so it's kind of like a waste of resources just have this being able to matter what so instead we're gonna have to do here is kind of push the value down into the hook so instead of mechanically that looks like this an option I'm gonna stay enabled can be either true or false using that there and this is gonna add a new argument here so I'm gonna have this be enabled by default it'll be true and a default object it's not being used and then what I'm gonna do here is push that enable AG into here so I'm going to say if it's enabled sorry if it's not enabled then returned early don't actually make these event listeners and of course I have to add this dependency array in here as well make sure that things work I've expected so I'm going to say console.log my little trick I like to do is actually just copy and paste the code that I'm shadowing is it easy to kind of see what's going on so here the automaticall mr is there just a false well this is gonna be hard to see because you're not gonna see this here let's actually do that and we're gonna do another console log of this content so we can see what's happening so here it's working as expected if i increment things working the correct i do this you can see that removing that listener was happened and now there's no event listener here suppose when i do this everything's working as expected just great so now do this back and it will true I have entler listed there and things were working again as expected very very nice very very simple and that's kind of like the big trick to making things be conditional making Hulk's being conditional of course you want to extend this more or less I should give us some noise out of the way you can also add another option if you want so you want to add like the on scroll you want to be notified that you want to use you want to register it on scroll event so window roll event the big thing with is it on the document to do to do to do look at some window so that's the thing here right now we have these event with sirs being hard close to the document but we actually want a scroll let's do this let's do use event listener on scroll just here say console.log they see me scroll wing so i save that let's just bring the disks that i want to get distracted when i do that when i scroll I don't see any consoles being added like if I were to do window add eventlistener scroll and I said I said console log so slowly and then scrolled only things were high enough to scroll let's make this taller do style height I want to say 110 so the VM but I want VH I don't the heck house thing about with you hi H so now when I scroll inside that theory how here they seem you scrolling just like that so that's working as expected and so scrolling is also happening too but let's say I want to actually they see me scrolling it's also happening but let's say I also don't want to have this on the document I actually want this full of a goof anybody that was gonna work on the document object but I guess it does but say I want to actually have this on the window object I can actually add here the target and I'm going to stay here window which means that here I can have target Eagles documents by the fault that could be whatever I want and here I have target of course having to add that to my dependency array to make things look as expected of course they seem useful ones working as expected now again so that's a little bit nice extension to this custom hook that we made making a little bit more flexible and easier to use in many different contexts hopefully that was fun and educational thanks for watching you must subscribe if you're not already I'll catch you in the next video