I'm back at the documentation for the reactor sizable library, I'm going to scroll down a little bit
and just find it an example of how to use this thing down here.
You'll find a quick usage example.
They immediately start to import two different things from reactors sizable.
There's one component they are importing of recyclable and another called a sizable box.
These two things are pretty much identical.
The big difference is that sizable box has a lot of configuration already attached to it.
Realisable is kind of like a lower level version of this component.
So we would want to use recyclable if we wanted to add in a ton of customization.
But you and I don't we just want something that can be kind of expanded and shrunk whenever a user clicks
and drags on some element.
So for us, we want to use the sizable box.
We can then scroll down a little bit and get a type definition snippet right here of exactly what crops
we are going to provide to this component.
So you can take a quick glance through some of these.
We're going to add in many of these different crops over time.
Some of them that I want to really point out here are that we're going to eventually specify what we
want to make recyclable by wrapping some other element with this react.
Very sizable thing.
I know that's really confusing when I say it.
So let's just go back over to our code editor and start working on this sizable component.
All right, so back inside my editor, I'm going to first get started by finding the components directory
inside there, I'm going to make a new file called a sizeable DOT TSX.
Then inside of there, I will import re sizable box.
From react, very sizable.
I'm going to create a new component called a sizable.
And I will export that by default.
Then on our component right here, I'm going to apply our type definition, so react dot F.C. and we're
going to stick in an interface definition right there because we are going to receive some different
props into our sizable component.
I'm going to define an interface right above.
And right now, the only problem that we're going to be looking for is something that specifies which
direction we want to allow our thing to do, wanted to resize horizontally or vertically.
They're going to say that we're going to expect to receive a direction from.
And it should be of type, either horizontal.
Or vertical.
So just a quick reminder on TypeScript, whenever we specify that we want to receive a prop as a string,
we can happily put in just dring by itself.
But if we want to only allow very certain strings, we can write out something like this.
This says that you must provide a prop of direction and it must be either the exact string, horizontal
or vertical.
So we can then take sizable props that interface and provide it inside those angled brackets.
All right, so then we'll receive that direction.
We're not going to use it right away, but we will eventually come back as we add support for dragging
and resizing in either direction.
I'm also going to receive as a prop children.
Now, just remind our own children we receive that children, if we ever try to render sizable in place
some other component or some other like text content inside of it.
So children is going to be the thing that we want to make sizable in our case, we're going to eventually
want to make our entire code something sizable.
Then inside of our component right now, I'm going to just return children.
You'll notice that right away we're getting an error message here it is because we have to actually
return a little snippet of jazz and technically children doesn't really fit the bill.
So I'm going to wrap children with a quick diff like so.
OK, so kind of humble beginnings here, we're not even really using a sizable box just yet.
Nonetheless, let's go back over to our code cell component and just make use of this sizable thing
that we just put together inside there.
And the ones we kind of get it started to be wired up will then come back over and start to add in a
little bit more functionality.
So back inside of our code cell or text file, here it is right here.
I'm going to go to the very top and import sizable from.
Realisable.
And then going to scroll down and then the first thing I really want to make sizable is my entire code
cell in the vertical direction.
So I want to be able to expand all this content vertically.
I'm not going to worry about doing the horizontal divide between the code editor and the preview window
just yet.
So to make all this stuff re sizable, I'm going to wrap this entire div right here with a sizable.
And sizable closing tag right there.
We're then getting an air from our component, that is because we have to provide a direction.
I'm going to add in a direction of vertical to say that we eventually want to make this thing very sizable
only in the vertical direction force.
Right now, we're not actually doing anything with that prop, but we will in just a little bit.
OK, so now if we go back over to our browser.
And refresh, we're going to see just what I wrote out, just children, I didn't actually put that
inside of any angle or me curly braces.
Let me go and fix that really quick.
So back inside a sizable I have to put in my curly braces right there.
That's better.
Now, if I go back over, I'm still going to see the exact same content and you'll notice that we've
got absolutely nothing different inside of here, of course, that's because we have not actually implemented
any of the sizable box stuff just yet.
So let's start to implement a sizable box and make sure that children is very sizable in the next video.