Add Observer Signed with airSlate SignNow

Add observer signed

hey how's it going it's Lee Halladay and today what we're going to be doing is learning how to use intersection observer it's an API that's been out for a little while now but is still pretty new and what it allows you to do is see when an Dom element is visible on the screen and the way we're going to do that is by sort of recreating one of the hooks I found on the use hooks comm website and it's called use on screen so I've already set up a create react app and I'll just show what it's doing so far it's got an app component that's all we're going to be doing it's it's a small demo and what it does is it displays a div on the screen two divs actually one that's a hundred VH so that's this one here and the goal of this demo is that when I scroll down and I hit around 300 pixels visibility of this other section it's gonna swap and display a gif same as the demo on this use hooks example here so I've sort of mocked out the variables we need we're going to need a ref to know when the Dom element is visible on the screen and we're gonna have some state visible so that that lets us know if it's on the screen or not so we've got our first div that's taking up a hundred VH it's telling us to scroll down and then we have our other div here which this is the one that we need the ref for so we can determine whether it's visible or not and then we're tweaking the Styles a little bit so if visible is true it's gonna swap out of the background color from this gray here to this teal or whatever that is and then we're also changing the content a little bit so if visible is true we're going to swap out the content to be this div here this is hey I'm on screen and it will display this gif and if visible is false it will tell you to basically keep scrolling and so that we can trigger the the event so right now it does nothing but that's what we're going to do so the way we're going to do this is by creating a custom hook which will be given the same name as this one use on screen so it's a function use on screen and what this function is going to receive are some options that we will pass to the intersection observer API when we create a new instance of that so the first thing we need is a ref that basically points to the actual Dom element that we're trying to keep track of its visibility or not and there's actually two ways to do this I'll show the first way and then we'll talk about what problems it might have and we'll swap that out for another way so the first way will be using the use ref hook so we'll say ref and that is use ref like that okay so this will create us a ref variable that sort of starts out like this it's an object with current and it will be null at the beginning okay so the next thing we need is an effect that will basically run whenever the ref changes or basically we just wanted to run once the first time that this app component is rendered so we'll say react use effect and whenever you use use effect you pass in a function that gets called so we'll pass in here and first things first you always need to pass an array of variables to watch to see when they change to know when to run this effect function or not so we're going to be looking at the you breath and just because we're going to be using options we should also have that in here as variables to watch out for okay so what should our use effect function do the first thing we're going to do is we're going to create an observer so this is using the the intersection observer API and this is how it looks like you say new intersection intersection observer and the first thing you pass to this object or class being created is a callback function so this is the function that gets called every time it sort of detects a change in the thing that you're observing and it's going to pass us basically an array of of elements that we're observing because we're only watching one element at a time we're just going to put an array in here and deconstruct it so that we can pull out the the one entry that we're watching okay so when this gets called we have access to the entry and the entry tells us a whole bunch of information about the element that we're observing so what we want to basically do in this example is keep track of some state whether the element we're watching is visible or not so we need to create our state up here within our hook that we're building so we'll say visible and set visible is equal to react dot use state and we can start this out as false just assume it's not visible when we initialize it and what we're going to do now is use our set visible function that comes from the the use state hook and we'll say set visible and it's going to be equal to the entry and there's a property on entry called is intersecting that basically tells us whether or not it's visible on the screen so if you remember down here it says scroll down 300 pixels from the top of this section so whenever you're using intersection observer you can control how visible on the screen it should be before it calls your intersection observer callback function so we'll be passing in those options in this options variable here so we're just going to pass along those options to the observer okay the next thing we need to do we've created this observer but with the way refs work it might not always be referencing a Dom element on the screen so we just need to make sure that it is referencing something before we tell the observer to observe observe that wrath and that's because it's an object that has a current which may be null at the beginning so we'll say if a ref dot current then we can say the observer should observe the ref current like that so that basically starts the intersection observer observing the Dom element on the screen so with use effect you can optionally return a function that should be called sort of anytime the effect is no longer valid or when it's basically whenever these variables change it's it's like a clean up function that can be called so we're gonna be returning a function here and what we're going to do is the same sort of thing so if there was a current element that this reference refers to we're going to say to the observer unobserved that reference like that so it's already giving me a little bit of a warning we'll just ignore it because I think it still works and we'll talk about maybe a better way to to clean that up you okay so we've got this which is the purpose of this is basically to set up an observer and then to observe the element on the screen but we need to return something back from our use on screen hook and essentially what we want to return back is the ref and whether or not the Dom element that it refers to is visible or not so we'll return in array it has the ref as the first item in the array and visible as the second and what that allows us to do now is to replace these sort of mocked out fake variables with the values that are returned from our use on screen hook so we can say Const ref invisible equals use on-screen okay and remember when we set up use on screen we could pass some options to it so that will be an object and the things were allowed to pass to it are basically any valid options that the intersection observer takes so we'll just scroll down and typically the two that you're going to be looking at our route margin and that's some that can be pixels or sort of any CSS property here that the measures like distance or spacing and here we can say we want it to have a route margin of 300 pixels because remember we wanted the user to have to scroll down 300 pixels in order to trigger this intersection you can also use threshold which is basically between 0 and 1 a percentage of how much this div should be visible so if you do 1 it needs to be 100% visible if you do 0.5 it's as long as it's half visible but we're gonna be using route margin for now and we'll maybe switch that up later so we're gonna say a route margin margin of 300 pixels like that so now when we come back to our app how you know what it is maybe it's minus 300 there we go so 300 pixels would actually be it sort of 300 pixels before it's visible so that would be really useful so you're lazy loading images or something like that and as the users starting to get closer to your div or your image that you wanna to lazy load in you can load it before the user actually Scrolls there but in this case we will only want to trigger the intersection 300 pixels after it's been visible so we can use a negative for that so as I scroll down once I get to 300 pixels it now triggers the intersection and what do I mean by triggers the intersection it calls this callback function that we passed into the intersection observer which calls set visible and to update the state based on whether the entry is intersection intersecting or not and because we were returning from this function the the ref and the visible we can use this visible property here to know whether we've triggered the intersection or not so as I scroll down it turns on and then as I scroll back again it turns off so we can switch this up a little bit there's the threshold we could use instead so let's say when it's 0.5 so 50% visible on the screen so now it's not 300 pixels but when it's about 50% visible so you can see it takes up half the screen and that's what triggers it now we could set it to like 0.9 and then it has to be 90% visible before it turns on like that so we'll just point to whatever that is just barely visible um so I mentioned there's a couple ways of using ref in this case and the reason it works here passing in ref as one of the values to our use effect variable array to watch out for changes for to trigger the effect is because there's no sort of logic here of whether or not you should display the ref it renders every time this div so it happens to work because it in effect at first renders what's on screen and then the effect is run so by the time the effect is run for the first time our ref will already have a value so it should be okay but you can start to run into some some difficulties with use effect passing in ref as one of the variables here if you have logic in your component that optionally displays that element or not so instead of using the use ref hook you can use what's called a ref callback to set it instead and you can do that using state so here we can say ref and set R f is equal to react use state and we'll just set it to null at the beginning so now in sight of wrath it's not going to have a current property it's actually just going to contain the direct reference to the Dom element so we don't have to say ref dot current anymore we can just use ref itself like that but one little caveat here is instead of returning the ref value we actually want to return the set ref function to call to modify that state so here you may want to just switch this up so that you know what's happening here to set ref and you can pass set ref here to ref and that's because ref can accept sort of two different things it can accept something that's returned from the user f hook which is an object that has a current property but it can also accept a function that gets called and that function gets passed the Dom reference so we're passing set ref here that will get called and it will basically update our state the ref property to contain that Dom element inside of here let's just make sure it's still working refresh this point to yes it gets displayed on the screen so this is potentially a safer way of using ref when you maybe optionally rendering the element that you want to hold a reference to all right so if this was a lot of work to basically figure out whether something's on the screen or not you're in luck and I would probably recommend this by default unless you have a really simple or case that this package can't handle there's a react intersection observer package that's pretty popular and it's being developed still and this back basically comes with a lot of that functionality we just created ourselves today along with some additional functionality like maybe there's something a function you want to call the first time something is displayed on the screen I've seen this in New York Times I don't know if they're still doing this but as you're reading paragraphs in some of their articles they're sending up sort of analytics data to their back-end well let's just for fun see this go to our network tab maybe they're not doing it anymore but at some point I believe they were sort of reporting back to the server as you've read certain paragraphs so you could use intersection observer for that as a paragraph gets displayed on the screen for the first time you may want to send a post to your back end basically you can keep track of how far down the page the users read that's one way to do it so I would recommend using this package by default but what I wanted to cover today is basically how to build this ourselves and how to use intersection observer API within a react app so just to review what we cover today we created our own use on screen hook this hook brings in some options these options are passed to the intersection observer so that's basically when to trigger the intersection callback function so whether it's maybe 300 pixels visible on the screen either 300 pixels before or after or a threshold of how visible the element is that you're watching so the first thing we needed is a place to basically store a ref to the Dom element that we're keeping track of whether it's intersecting on the screen or not and we looked at two ways to do that using use state with ref callbacks and also using the use ref state we also set up some state to keep track of whether or not the element that we're watching is visible or not so here we have our effect and this effect were passing in the ref that's the reference to the Dom element along with the options that we're passing to the intersection observer and what this basically does is it sets up an observer which has a callback function here and if the ref has a value so if there's a Dom element in this variable we're gonna tell the observer to observe that Dom element and to notify us of whenever it's visible on the screen or it's not visible on the screen whenever that changes and then we're passing a clean up function from our effect which will essentially if there's a ref here tell the observer to stop watching that ref so from this custom hook that we created use on screen were returning the set ref function to use be used in the ref callback below and also whether or not the Dom element that we're watching is currently visible or not so in terms of its use we've D structured out those two variables again in two set ref invisible and we're also passing in some options they'll be passed to the intersection observer so down here we've got one div that took up a hundred VH of the screen basically the whole thing and then our other div and this is the one we want to create a reference to and then we're gonna modify some things based on whether it's visible or not so we've changed its background color and also some of the content that's displayed within it and all of this code here is I basically copied and pasted from the example used on the use hooks comm slash use on screen example I would say they have potentially some some issues in the example here only that they passed an empty array to the use effect hook so basically they only wanted to run once but as I mentioned if you have logic that um that basically may or may not show the the element that you want to keep track of the intersection observer on this will cause some problems here because the first time it runs the use effect there may not be a ref so that's where you could run into some issues but as I also mentioned the react intersection observer package seems to do a really good job of keeping track of all this complexity for us and giving you some different ways in terms of how you can use it like callback function that only gets called once looks like you can use it with render props or as a hook and so it's it's a very flexible library check it out hope you enjoyed this video I'm not going to share this the code because it's essentially the exact same thing used on this page here I just wanted to explain it I hope you enjoyed it take care hi