Inside of our sizable component, we need to add in some logic that takes a look at this direction,
Propp if its value is horizontal, then we need to set up all of our props to be slightly different
than what they are right now.
And if the direction is vertical, then we would want to leave all these different props as they are
right now.
There's a variety of different ways we can write out all the logic for this.
Let me show you one possible way that might seem like a really good idea, but get kind of tedious really
quickly to remember right now we've got this hight property and that specifies the starting height of
our sizable box and we want it to always be three hundred whenever we are trying to do a resize in the
vertical direction.
That value of three hundred right there is what gives us this kind of default height of three hundred
pixels.
So if we are trying to do a resize in the horizontal direction, we do not want a default height of
three hundred anymore.
Instead, we would want a default height of infinity, which basically means just allow all this content
to span 100 percent height in the vertical direction.
The long story short, we could write out a little bit of logic that looks like this, something it
says, If direction is equal to vertical, then give us three hundred.
Otherwise give us infinity.
So we've got a little ternary expression on here and it has the exact same logic as what I just mentioned.
So if direction is vertical, three hundred otherwise infinity.
This seems like a very reasonable solution, but you'll very quickly notice that we really need to apply
this logic for all these different props.
If our direction is horizontal, then constraints is going to change and max constraints and with and
handles as well.
So adding in a ton of different ternary expressions would just get a little tedious.
So let's take a look at a different way of specifying all these different props based upon the value
of direction.
So a different way that we could implement this.
Would be to create a new variable up here with the let keyword and I'm going to call it a sizable.
Then I'll set up an IV statement and I'll say if direction is equal to horizontal.
Then I'm going to set sizable props to one object.
And inside of you will add in eventually a bunch of configuration, such as the height with all that
kind of stuff.
Otherwise, if direction is any other value in this case, the only other value it could be is vertical.
Then in that scenario, I want to set sizable props to some other set of props.
And again, inside of here, we would write out some height with and all that other kind of stuff.
Then finally, we could take this sizable, perhaps object and provide it directly to a sizable props.
First sizable box.
That's pretty much it if we take this approach, it just means that we don't have to write out a ton
of different expressions and that's pretty much it.
The last thing we might want to do is try to apply some type, checking on these objects and make sure
that we are providing all the different required props that sizable box expects.
So for that, we can try to apply a type annotation to this sizable props variable.
Let me show you what I mean.
I'm going to do a quick command click on this sizable box and I will take us city type definition file
for reactor sizable inside of your.
You might notice that there is a type that is being exported from this library called Sizable Box Props.
This type right here describes all the different properties that we must provide to the sizable box
component so we can import this type into our project and then use that to annotate the type of sizable
props.
And then TypeScript will have enough information to make sure that we provide all the required properties
inside of these two objects.
So let's start writing out the code for this, because just doing a verbal description of what we need
to do is a little bit confusing.
At the top of this file, I'm going to import re sizable box props.
I'm then going to use that type to annotate the type of sizable props right here, so wrist sizable
box props, and as soon as we add that in, we're not going to get two different air messages.
You can hover over these and they're going to tell you, hey, if you want to define some props that
are going to go to a sizable box component, you must provide a with and a height to.
Now, TypeScript is doing some type checking on these objects and making sure that we are defining all
the appropriate props, which is definitely a nice little benefit.
OK, so now we understand our general strategy for defining these two different types of objects, let's
start putting in some implementation in just a moment.