Great.
I guess we're gonna start off by creating a scroll back to the top button and in the process we're going
to cover how to listen for window events in react use effect and why it is important to use a cleanup
function when we are using use effect and the feature I'm talking about.
Is this one.
I have the button and then once I click on a button I can scroll back to a top.
Now if the user starts scrolling notice eventually we can set it up that that button shows up.
But if we scroll back to top ourselves and of course the button disappears again nothing earth shattering
but in the process we're gonna cover some important features when it comes to use effect.
And I'm going to head back to my project that's going to be step number one.
I'm going to clean up the index meaning I'm going to close it out and then we're going to create a new
component.
And I guess I'm going to call mine the scroll button.
As always you can call yours however you'd like.
So within the components we're going to create a new file and I'm going to call this scroll.
Scroll button J Yes.
Now I'm going to save it of course.
And then next I would want to create some kind of function that is gonna be my component.
I think I can close the terminal.
We can run our FC just for a change and let's just say that we're not going to be returning a div we
always are going to be returning a button and the button is just gonna say hello there.
Something like that.
Now our next step is head to app J.S. and then look for our button.
So where we have the components of course the last one I think was the private road.
So right after death you can go with the import that I'm looking for scroll button from and you guessed
it it is in the components so components.
Then scroll button and let's import that then.
I don't know.
Right after alert maybe because again we're gonna use position fact so it doesn't really matter.
So we're gonna go with a scroll button.
Let's save that.
And of course in this case it complains that there is no scroll button.
So my import is correct but the problem probably is in the scroll button itself where I didn't export
and I'm sure enough I didn't.
So let me maybe add an export.
So export default and default and then I guess in this case I can just get her off the name as well.
Let's say that now of course we have her button now button doesn't do much.
We just have Hello there and of course we can click all day long and nothing is happening.
So what kind of functionality we can set up for the button.
Well first I would want to have some kind of local variable because the main idea is going to be that
later in the next video we're gonna set up a video event in the actual user context.
So we're going to be listening for scroll events because a window has that particular option.
We can listen for events on the window object and the thing that we're going to be listening for is
this coherence.
So as we start scrolling we're gonna be checking what is the height.
But for the time being I would like to hardcoded my height just so we can see 1 The height is bigger
and 100 then we can show the button.
And of course once the height is not bigger than a hundred then we're not going to show it.
Since our CSF is going to depend on it again just a dummy variable that we're going to delete later
but I'm going to go with height and then height is gonna be equal to I don't know 200.
That's the step number one.
Then we're gonna set up some imports so I'm going to go with import and we're going to import the react
icon and the name is F.A. angle.
Double up then it is coming from reactor icons then forward slash if and also want to get a user context
because eventually we're gonna use it so we might as well imported right away let's go with user context
and I would like to mention again that I'm just being lazy where I'm not setting up a separate context
usually probably has more and more things you're adding to your context and might as well make sense
to make a separate context.
In this case I'm just using user context because it is my top component meaning my road component I
guess more precisely and that's the reason why I'm stuffing the functionality whether that's alert or
whether that is going to be my scroll button and we're going to go with the user context of course it
is coming from the context folder we need to look in a context and then we're looking for my user we're
gonna save it and then we're going to work on the button remember we have our local variable that's
a good start but now we want to actually implement it where I'm going to go with class name and then
this is gonna be dynamic and I'm gonna check what is the value for height again please keep in mind
eventually this value is going to come from the user context when we're looking for the scroll position
but for the time being we're just kind of hardcoded and I'm going to say like this and then say if the
height so I'm going to check if the height is bigger than hundred then I would like to actually show
the body and essentially what that means is as the user starts scrolling once the value is going to
be bigger than 100 then we're gonna show the but in our case again this value is just hardcoded and
we're going to use a Turner operator where I'm going to say that if that is the case we're going to
add two classes so scroll Boediono which is actually going to show the button and then show scroll.
Scroll.
In now if the height is less than hundred then I'm just gonna use a scroll button and if I'm not adding
these show scroll button.
Well technically the button is gonna be there but we're not going to be able to see it so we're gonna
add here B10 and then also we're gonna add our icon so let's add here the icon we're gonna go with F.A.
angle double up that is of course our icon let's save that and now I have my button Why do I have the
button.
Because the value is bigger than two hundred that Saudi button is gonna look like now again we're gonna
control when it appears and when it disappears but at the moment everything is hardcoded.
So if I'm gonna go the value of the height 90 not 0 0 or 90 then you're going to see that the button
is not there.
Why.
Because technically our user hasn't scrolled down past the hundred.
But of course in our case we are just outgoing now it also would want to set up or the button the functionality
because once we click on a button I would want to scroll back to the top.
How it works.
Well we need to set up our click.
Correct.
So we're going to go on click and then we're gonna set up our function and I'm going to call my function
very explicit scroll back to top and then of course right above the return we're going to create our
function otherwise we're going to have a big fat error.
And then the function is going to look this way where we're gonna have const I'm going to set this up
as an oral function so scroll back to the top.
Now I'm not going to pass any arguments.
I don't care about the event or anything like that or I would want to use the method that is on the
window object and the method is we know and then we have scroll to.
And then within the scroll too we pass in the object and then within the object we pass will what would
be the coordinates where we would want to scroll to and what would be the behavior now keep in mind
you can omit the object and just use the coordinates.
But if you use the object then you can parse the behavior.
Essentially this is going to be a smooth scroll.
So in this case I'm going to go with top zero because that's where I would want to scroll to the left
is also gonna be zero.
And lastly we're going to have a behavior and I'm going to go with smooth.
We're going to go smooth and you're going to notice first of all again our button is right there because
we hardcoded our value to be bigger than 100.
That's step number one.
And second as I click on a button notice we nicely scroll back to the top.
So once we have set up our component next we're going to work in our user context essentially to listen
for window scroll event.