Let's take a look at how we're going to solve this problem inside of our sizable component.
So this is our component right here, rather than just providing a with drop down to a sizable box.
We're going to instead create a new piece of state and we're going to call it with.
So we're going to have a width piece of state.
This is going to keep track of whatever the width is inside the sizable box.
We're going to initialize this piece of state to be seventy five percent of the windows in or with.
So essentially exactly what we are doing right now.
So let's say this gets initialized to be six hundred and fifty.
We're then going to take this piece of state and provide it as a prop down into a sizable box.
So that will cause this piece of state to also initialize to be six hundred and fifty.
Now, here's the trick.
Whenever a user revises that sizable box and this internal piece of state changes, let's say down to
three hundred, we're going to add in a callback to be told about that change in state.
So we're going to take that new value of width and we're going to set our piece of state to be identical.
Then whenever we render our sizable element.
We're going to take that with piece of state and provide it again as a prop down into sizable bucks,
but now these two values of with are always going to be synchronized and identical so we can render
a sizable box as often as we want, so long as we just keep on.
Providing this with piece of state is it's always going to be the same.
It's always going to be synchronized.
So that's how we're going to solve this.
Let's go back over to our editor and figure out the actual implementation.
Back over here.
I first want to figure out how we can get a callback function to tell us about whenever the with piece
of state inside of the sizable box is changed or that I'm going to go down to our sizable props object
right here in the horizontal direction.
And I'm going to add in a on resize stop function.
So, as you guessed, this function should be stopped, not top.
There we go.
So as you guessed, this function is going to be called after a user finishes resizing our little panel.
So, in other words, whenever they stop dragging that thing right there.
The like, that's a stop and that's a stop.
The first argument to it is going to be an event object that we don't really care about in this case,
but the second argument is much more interesting.
I'm going to call it data, and we're just going to add in a quick console log of data right now.
Then back inside the browser.
I'm going to refresh the page.
And then do a little drag of that thing.
So here's that second argument, Canterlot, you'll notice that it has a size property inside of it
and inside there is a with property that tells us what the new width is of this left hand panel over
here.
So we're going to add in our own piece of with state and we're going to update our with state to be
exactly equal to that value.
That's how we're going to synchronize these two things.
OK, so back at the top of our file, I'm going to add in a with a piece of St..
And I will initialize it to be a window in with times zero point seven five.
So again, that's our starting with.
Then down inside that callback that we just put together.
Rather than doing a council log of data will instead set our width to be data that size with.
And then finally on our wrist, sizable props object in the horizontal direction, rather than providing
this hardcoded with value right there of Inter with time zero point seventy five, we're going to instead
provide that with piece of St..
We're in a scenario here where our key and the value are identical variable names or property and variable
names, so we can condense that down to just be with like so and that should be it.
So let's save this over.
I'll do another refresh.
And now if I start to resize this thing and then resize my browser window, I don't get that jump that
we were getting before perfect.
So it's definitely works.
Now, unfortunately, there is a downside.
It turns out that there's actually a bug inside of the wrist, sizable box library itself.
Let me show you what the bug is and we'll just fix it up very quickly.
So right now, if I expand out my code editor and then shrink my browser window, remember, we just
added in some code to fix this.
So we should be updating right now our max constraints.
But unfortunately, when we start providing that with Propp directly to a sizable box, it no longer
really respects those max constraint values.
So max constraints not really respected anymore.
They pretty much just get tossed out the window because we are providing a with Propp directly.
This is you could argue whether this is a bug.
In my opinion, it is a bug because there's absolutely nothing inside the documentation that says that
max constraints are not going to be respected under certain scenarios.
So kind of unfortunate, but it's OK.
We can add in a little bit of code to just fix this ourselves.
So to fix that, I'm going to go back up to where we watch for wrist sizes of the overall browser window.
And inside of here, I'm going to take a look at the value of winter window inner with.
We're going to compare it to our constraint.
So I'm going to say if.
Window inner with.
Times zero point seventy five.
Is less than our current with peace of states, and that means that are with peace of state is too large
and we need to shrink it down.
So in that scenario, I'm going to update our with peace of states to be window.
Dinner with zero point seven five, so this is pretty much what the library is doing internally to implement
those constraint checks, pretty much just saying, OK, if our current width is greater than this maximum
with this is really amax right here, then we need to reduce the current width.
So we're going to reduce the current width to seventy five percent of the entire width.
All right, so let's say this again.
Do another refresh, and now if I start to track down that browser window, yeah, now that thing is
starting to resize correctly.
OK, that looks pretty good.
All right.
Well, that is pretty much it for our sizable component.
I know a lot of work goes into it to make these things work as expected.
One thing I want to point out here is that we haven't really done anything about the vertical direction,
so we've not really made sure that resizing our browser window shrinks that thing in the vertical direction.
This is kind of done on purpose because a user can always scroll to kind of get down to that bottom
extent.
They can always just very easily scroll down and say, OK, there's my Dreger.
So if they start to reduce the size of it in any way, no, to me, the browser window and they lose
that bottom dragger, no problem.
They can just scroll down to find it.
So I'm really not as concerned about that vertical drag or any kind of these constraints in the vertical
direction as I am about the horizontal direction, because we don't get that same kind of scroll behavior
if we start shrinking our window down too far horizontally.
But we do if we do it vertically.
So I'm going to say that our sizable component is pretty much good enough right here.
So let's take a pause right here and move on to our next feature instead of our top.