1 00:00:00,180 --> 00:00:00,500 Great. 2 00:00:00,870 --> 00:00:06,270 I guess we're gonna start off by creating a scroll back to the top button and in the process we're going 3 00:00:06,270 --> 00:00:13,410 to cover how to listen for window events in react use effect and why it is important to use a cleanup 4 00:00:13,440 --> 00:00:17,850 function when we are using use effect and the feature I'm talking about. 5 00:00:17,850 --> 00:00:18,810 Is this one. 6 00:00:18,810 --> 00:00:23,660 I have the button and then once I click on a button I can scroll back to a top. 7 00:00:23,760 --> 00:00:28,770 Now if the user starts scrolling notice eventually we can set it up that that button shows up. 8 00:00:29,160 --> 00:00:35,370 But if we scroll back to top ourselves and of course the button disappears again nothing earth shattering 9 00:00:35,700 --> 00:00:40,900 but in the process we're gonna cover some important features when it comes to use effect. 10 00:00:40,920 --> 00:00:44,570 And I'm going to head back to my project that's going to be step number one. 11 00:00:44,670 --> 00:00:49,410 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 12 00:00:49,410 --> 00:00:50,260 component. 13 00:00:50,460 --> 00:00:53,520 And I guess I'm going to call mine the scroll button. 14 00:00:53,960 --> 00:00:56,430 As always you can call yours however you'd like. 15 00:00:56,430 --> 00:01:01,740 So within the components we're going to create a new file and I'm going to call this scroll. 16 00:01:01,740 --> 00:01:04,120 Scroll button J Yes. 17 00:01:04,310 --> 00:01:06,000 Now I'm going to save it of course. 18 00:01:06,000 --> 00:01:11,000 And then next I would want to create some kind of function that is gonna be my component. 19 00:01:11,130 --> 00:01:13,260 I think I can close the terminal. 20 00:01:13,260 --> 00:01:20,580 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 21 00:01:20,580 --> 00:01:25,230 always are going to be returning a button and the button is just gonna say hello there. 22 00:01:25,440 --> 00:01:27,060 Something like that. 23 00:01:27,060 --> 00:01:31,800 Now our next step is head to app J.S. and then look for our button. 24 00:01:31,800 --> 00:01:35,950 So where we have the components of course the last one I think was the private road. 25 00:01:36,030 --> 00:01:43,230 So right after death you can go with the import that I'm looking for scroll button from and you guessed 26 00:01:43,230 --> 00:01:46,390 it it is in the components so components. 27 00:01:46,500 --> 00:01:51,130 Then scroll button and let's import that then. 28 00:01:51,480 --> 00:01:51,900 I don't know. 29 00:01:51,900 --> 00:01:56,670 Right after alert maybe because again we're gonna use position fact so it doesn't really matter. 30 00:01:56,670 --> 00:01:58,950 So we're gonna go with a scroll button. 31 00:01:58,950 --> 00:01:59,920 Let's save that. 32 00:01:59,970 --> 00:02:03,570 And of course in this case it complains that there is no scroll button. 33 00:02:03,720 --> 00:02:08,880 So my import is correct but the problem probably is in the scroll button itself where I didn't export 34 00:02:09,150 --> 00:02:10,760 and I'm sure enough I didn't. 35 00:02:10,770 --> 00:02:13,610 So let me maybe add an export. 36 00:02:13,640 --> 00:02:21,410 So export default and default and then I guess in this case I can just get her off the name as well. 37 00:02:21,520 --> 00:02:25,780 Let's say that now of course we have her button now button doesn't do much. 38 00:02:25,780 --> 00:02:30,010 We just have Hello there and of course we can click all day long and nothing is happening. 39 00:02:30,430 --> 00:02:33,370 So what kind of functionality we can set up for the button. 40 00:02:33,370 --> 00:02:38,560 Well first I would want to have some kind of local variable because the main idea is going to be that 41 00:02:38,710 --> 00:02:45,350 later in the next video we're gonna set up a video event in the actual user context. 42 00:02:45,550 --> 00:02:50,870 So we're going to be listening for scroll events because a window has that particular option. 43 00:02:50,920 --> 00:02:56,080 We can listen for events on the window object and the thing that we're going to be listening for is 44 00:02:56,080 --> 00:02:57,070 this coherence. 45 00:02:57,100 --> 00:03:00,100 So as we start scrolling we're gonna be checking what is the height. 46 00:03:00,640 --> 00:03:06,490 But for the time being I would like to hardcoded my height just so we can see 1 The height is bigger 47 00:03:06,490 --> 00:03:08,830 and 100 then we can show the button. 48 00:03:08,830 --> 00:03:12,590 And of course once the height is not bigger than a hundred then we're not going to show it. 49 00:03:12,590 --> 00:03:17,620 Since our CSF is going to depend on it again just a dummy variable that we're going to delete later 50 00:03:17,970 --> 00:03:23,290 but I'm going to go with height and then height is gonna be equal to I don't know 200. 51 00:03:23,410 --> 00:03:25,210 That's the step number one. 52 00:03:25,300 --> 00:03:30,970 Then we're gonna set up some imports so I'm going to go with import and we're going to import the react 53 00:03:31,000 --> 00:03:34,570 icon and the name is F.A. angle. 54 00:03:34,810 --> 00:03:43,390 Double up then it is coming from reactor icons then forward slash if and also want to get a user context 55 00:03:43,630 --> 00:03:49,000 because eventually we're gonna use it so we might as well imported right away let's go with user context 56 00:03:49,390 --> 00:03:54,850 and I would like to mention again that I'm just being lazy where I'm not setting up a separate context 57 00:03:55,240 --> 00:04:00,640 usually probably has more and more things you're adding to your context and might as well make sense 58 00:04:00,640 --> 00:04:02,210 to make a separate context. 59 00:04:02,230 --> 00:04:07,960 In this case I'm just using user context because it is my top component meaning my road component I 60 00:04:07,960 --> 00:04:13,690 guess more precisely and that's the reason why I'm stuffing the functionality whether that's alert or 61 00:04:13,690 --> 00:04:18,280 whether that is going to be my scroll button and we're going to go with the user context of course it 62 00:04:18,280 --> 00:04:24,580 is coming from the context folder we need to look in a context and then we're looking for my user we're 63 00:04:24,580 --> 00:04:30,100 gonna save it and then we're going to work on the button remember we have our local variable that's 64 00:04:30,100 --> 00:04:35,740 a good start but now we want to actually implement it where I'm going to go with class name and then 65 00:04:35,740 --> 00:04:41,530 this is gonna be dynamic and I'm gonna check what is the value for height again please keep in mind 66 00:04:41,860 --> 00:04:47,050 eventually this value is going to come from the user context when we're looking for the scroll position 67 00:04:47,500 --> 00:04:51,820 but for the time being we're just kind of hardcoded and I'm going to say like this and then say if the 68 00:04:51,820 --> 00:04:58,660 height so I'm going to check if the height is bigger than hundred then I would like to actually show 69 00:04:58,660 --> 00:05:03,400 the body and essentially what that means is as the user starts scrolling once the value is going to 70 00:05:03,400 --> 00:05:09,060 be bigger than 100 then we're gonna show the but in our case again this value is just hardcoded and 71 00:05:09,160 --> 00:05:13,330 we're going to use a Turner operator where I'm going to say that if that is the case we're going to 72 00:05:13,330 --> 00:05:20,730 add two classes so scroll Boediono which is actually going to show the button and then show scroll. 73 00:05:21,290 --> 00:05:22,120 Scroll. 74 00:05:22,290 --> 00:05:29,740 In now if the height is less than hundred then I'm just gonna use a scroll button and if I'm not adding 75 00:05:29,740 --> 00:05:31,290 these show scroll button. 76 00:05:31,430 --> 00:05:36,400 Well technically the button is gonna be there but we're not going to be able to see it so we're gonna 77 00:05:36,430 --> 00:05:44,260 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. 78 00:05:44,710 --> 00:05:51,850 angle double up that is of course our icon let's save that and now I have my button Why do I have the 79 00:05:51,850 --> 00:05:52,310 button. 80 00:05:52,450 --> 00:05:57,450 Because the value is bigger than two hundred that Saudi button is gonna look like now again we're gonna 81 00:05:57,460 --> 00:06:02,280 control when it appears and when it disappears but at the moment everything is hardcoded. 82 00:06:02,680 --> 00:06:09,580 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 83 00:06:09,580 --> 00:06:10,330 is not there. 84 00:06:10,330 --> 00:06:11,170 Why. 85 00:06:11,200 --> 00:06:14,570 Because technically our user hasn't scrolled down past the hundred. 86 00:06:14,620 --> 00:06:20,380 But of course in our case we are just outgoing now it also would want to set up or the button the functionality 87 00:06:20,860 --> 00:06:24,940 because once we click on a button I would want to scroll back to the top. 88 00:06:25,060 --> 00:06:25,920 How it works. 89 00:06:25,990 --> 00:06:27,820 Well we need to set up our click. 90 00:06:27,820 --> 00:06:28,820 Correct. 91 00:06:28,840 --> 00:06:33,580 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 92 00:06:34,090 --> 00:06:42,190 very explicit scroll back to top and then of course right above the return we're going to create our 93 00:06:42,190 --> 00:06:45,520 function otherwise we're going to have a big fat error. 94 00:06:45,700 --> 00:06:50,440 And then the function is going to look this way where we're gonna have const I'm going to set this up 95 00:06:50,440 --> 00:06:54,420 as an oral function so scroll back to the top. 96 00:06:54,430 --> 00:06:55,950 Now I'm not going to pass any arguments. 97 00:06:55,960 --> 00:07:01,660 I don't care about the event or anything like that or I would want to use the method that is on the 98 00:07:01,660 --> 00:07:06,080 window object and the method is we know and then we have scroll to. 99 00:07:06,250 --> 00:07:11,170 And then within the scroll too we pass in the object and then within the object we pass will what would 100 00:07:11,170 --> 00:07:16,510 be the coordinates where we would want to scroll to and what would be the behavior now keep in mind 101 00:07:16,810 --> 00:07:19,690 you can omit the object and just use the coordinates. 102 00:07:19,690 --> 00:07:22,930 But if you use the object then you can parse the behavior. 103 00:07:22,930 --> 00:07:25,060 Essentially this is going to be a smooth scroll. 104 00:07:25,420 --> 00:07:30,200 So in this case I'm going to go with top zero because that's where I would want to scroll to the left 105 00:07:30,280 --> 00:07:32,840 is also gonna be zero. 106 00:07:32,860 --> 00:07:36,920 And lastly we're going to have a behavior and I'm going to go with smooth. 107 00:07:36,920 --> 00:07:41,470 We're going to go smooth and you're going to notice first of all again our button is right there because 108 00:07:41,470 --> 00:07:45,070 we hardcoded our value to be bigger than 100. 109 00:07:45,070 --> 00:07:46,330 That's step number one. 110 00:07:46,330 --> 00:07:51,100 And second as I click on a button notice we nicely scroll back to the top. 111 00:07:51,400 --> 00:07:58,840 So once we have set up our component next we're going to work in our user context essentially to listen 112 00:07:58,840 --> 00:08:00,690 for window scroll event.