1 00:00:01,160 --> 00:00:05,600 I'm back at the documentation for the reactor sizable library, I'm going to scroll down a little bit 2 00:00:05,600 --> 00:00:09,140 and just find it an example of how to use this thing down here. 3 00:00:09,150 --> 00:00:11,030 You'll find a quick usage example. 4 00:00:11,330 --> 00:00:14,720 They immediately start to import two different things from reactors sizable. 5 00:00:15,050 --> 00:00:20,180 There's one component they are importing of recyclable and another called a sizable box. 6 00:00:20,770 --> 00:00:22,690 These two things are pretty much identical. 7 00:00:23,030 --> 00:00:27,530 The big difference is that sizable box has a lot of configuration already attached to it. 8 00:00:27,900 --> 00:00:31,750 Realisable is kind of like a lower level version of this component. 9 00:00:32,090 --> 00:00:36,050 So we would want to use recyclable if we wanted to add in a ton of customization. 10 00:00:36,240 --> 00:00:41,000 But you and I don't we just want something that can be kind of expanded and shrunk whenever a user clicks 11 00:00:41,000 --> 00:00:42,140 and drags on some element. 12 00:00:42,530 --> 00:00:45,410 So for us, we want to use the sizable box. 13 00:00:46,950 --> 00:00:53,400 We can then scroll down a little bit and get a type definition snippet right here of exactly what crops 14 00:00:53,400 --> 00:00:54,980 we are going to provide to this component. 15 00:00:55,650 --> 00:00:57,560 So you can take a quick glance through some of these. 16 00:00:57,570 --> 00:00:59,810 We're going to add in many of these different crops over time. 17 00:01:00,330 --> 00:01:04,800 Some of them that I want to really point out here are that we're going to eventually specify what we 18 00:01:04,800 --> 00:01:09,210 want to make recyclable by wrapping some other element with this react. 19 00:01:09,210 --> 00:01:10,230 Very sizable thing. 20 00:01:10,560 --> 00:01:12,230 I know that's really confusing when I say it. 21 00:01:12,420 --> 00:01:17,430 So let's just go back over to our code editor and start working on this sizable component. 22 00:01:18,950 --> 00:01:23,240 All right, so back inside my editor, I'm going to first get started by finding the components directory 23 00:01:23,780 --> 00:01:28,100 inside there, I'm going to make a new file called a sizeable DOT TSX. 24 00:01:29,460 --> 00:01:33,300 Then inside of there, I will import re sizable box. 25 00:01:34,350 --> 00:01:37,050 From react, very sizable. 26 00:01:38,330 --> 00:01:40,820 I'm going to create a new component called a sizable. 27 00:01:43,910 --> 00:01:46,100 And I will export that by default. 28 00:01:48,930 --> 00:01:55,410 Then on our component right here, I'm going to apply our type definition, so react dot F.C. and we're 29 00:01:55,410 --> 00:01:59,760 going to stick in an interface definition right there because we are going to receive some different 30 00:01:59,760 --> 00:02:01,500 props into our sizable component. 31 00:02:02,310 --> 00:02:04,110 I'm going to define an interface right above. 32 00:02:07,880 --> 00:02:12,140 And right now, the only problem that we're going to be looking for is something that specifies which 33 00:02:12,140 --> 00:02:17,930 direction we want to allow our thing to do, wanted to resize horizontally or vertically. 34 00:02:18,530 --> 00:02:21,660 They're going to say that we're going to expect to receive a direction from. 35 00:02:22,560 --> 00:02:25,470 And it should be of type, either horizontal. 36 00:02:26,700 --> 00:02:28,110 Or vertical. 37 00:02:28,910 --> 00:02:33,650 So just a quick reminder on TypeScript, whenever we specify that we want to receive a prop as a string, 38 00:02:33,800 --> 00:02:35,630 we can happily put in just dring by itself. 39 00:02:35,960 --> 00:02:40,130 But if we want to only allow very certain strings, we can write out something like this. 40 00:02:40,760 --> 00:02:46,730 This says that you must provide a prop of direction and it must be either the exact string, horizontal 41 00:02:46,970 --> 00:02:47,870 or vertical. 42 00:02:48,990 --> 00:02:54,300 So we can then take sizable props that interface and provide it inside those angled brackets. 43 00:02:56,950 --> 00:03:00,130 All right, so then we'll receive that direction. 44 00:03:00,730 --> 00:03:04,720 We're not going to use it right away, but we will eventually come back as we add support for dragging 45 00:03:04,930 --> 00:03:06,650 and resizing in either direction. 46 00:03:07,120 --> 00:03:09,700 I'm also going to receive as a prop children. 47 00:03:10,180 --> 00:03:16,270 Now, just remind our own children we receive that children, if we ever try to render sizable in place 48 00:03:16,270 --> 00:03:19,930 some other component or some other like text content inside of it. 49 00:03:21,000 --> 00:03:26,460 So children is going to be the thing that we want to make sizable in our case, we're going to eventually 50 00:03:26,460 --> 00:03:28,830 want to make our entire code something sizable. 51 00:03:30,630 --> 00:03:35,340 Then inside of our component right now, I'm going to just return children. 52 00:03:36,480 --> 00:03:39,960 You'll notice that right away we're getting an error message here it is because we have to actually 53 00:03:39,960 --> 00:03:44,130 return a little snippet of jazz and technically children doesn't really fit the bill. 54 00:03:44,340 --> 00:03:47,130 So I'm going to wrap children with a quick diff like so. 55 00:03:49,040 --> 00:03:54,030 OK, so kind of humble beginnings here, we're not even really using a sizable box just yet. 56 00:03:54,380 --> 00:04:00,620 Nonetheless, let's go back over to our code cell component and just make use of this sizable thing 57 00:04:00,620 --> 00:04:01,910 that we just put together inside there. 58 00:04:02,360 --> 00:04:06,590 And the ones we kind of get it started to be wired up will then come back over and start to add in a 59 00:04:06,590 --> 00:04:07,640 little bit more functionality. 60 00:04:08,730 --> 00:04:12,750 So back inside of our code cell or text file, here it is right here. 61 00:04:13,570 --> 00:04:18,370 I'm going to go to the very top and import sizable from. 62 00:04:20,519 --> 00:04:21,200 Realisable. 63 00:04:24,170 --> 00:04:30,050 And then going to scroll down and then the first thing I really want to make sizable is my entire code 64 00:04:30,050 --> 00:04:31,640 cell in the vertical direction. 65 00:04:31,980 --> 00:04:35,230 So I want to be able to expand all this content vertically. 66 00:04:35,600 --> 00:04:39,830 I'm not going to worry about doing the horizontal divide between the code editor and the preview window 67 00:04:39,830 --> 00:04:40,450 just yet. 68 00:04:41,210 --> 00:04:46,700 So to make all this stuff re sizable, I'm going to wrap this entire div right here with a sizable. 69 00:04:49,320 --> 00:04:51,780 And sizable closing tag right there. 70 00:04:53,340 --> 00:04:56,940 We're then getting an air from our component, that is because we have to provide a direction. 71 00:04:57,450 --> 00:05:02,130 I'm going to add in a direction of vertical to say that we eventually want to make this thing very sizable 72 00:05:02,130 --> 00:05:04,210 only in the vertical direction force. 73 00:05:04,230 --> 00:05:08,190 Right now, we're not actually doing anything with that prop, but we will in just a little bit. 74 00:05:09,670 --> 00:05:11,470 OK, so now if we go back over to our browser. 75 00:05:12,880 --> 00:05:17,890 And refresh, we're going to see just what I wrote out, just children, I didn't actually put that 76 00:05:17,890 --> 00:05:19,990 inside of any angle or me curly braces. 77 00:05:20,200 --> 00:05:21,400 Let me go and fix that really quick. 78 00:05:21,580 --> 00:05:24,940 So back inside a sizable I have to put in my curly braces right there. 79 00:05:24,970 --> 00:05:25,480 That's better. 80 00:05:26,460 --> 00:05:30,420 Now, if I go back over, I'm still going to see the exact same content and you'll notice that we've 81 00:05:30,420 --> 00:05:34,350 got absolutely nothing different inside of here, of course, that's because we have not actually implemented 82 00:05:34,500 --> 00:05:36,600 any of the sizable box stuff just yet. 83 00:05:37,050 --> 00:05:42,570 So let's start to implement a sizable box and make sure that children is very sizable in the next video.