Get the raw width and height of container

[tonyxiao]

Is there a way to access the raw width and height, not just whether they match specific queries?

[d6u]

Currently the width and height is not provided. But I could update the API this weekend.
On Tue, May 17, 2016 at 5:44 PM tonyxiao [email protected] wrote:

Is there a way to access the raw width and height, not just whether they
match specific queries?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#14

[d6u]

@tonyxiao Could I ask you what's your use case for accessing width and height?

[tonyxiao]

@d6u I need to dynamically compute the number of children components to render based on parent width. Essentially the "breakpoints" are dynamic and doesn't lend itself well to a set of predefined queries.

[d6u]

@tonyxiao I see, thanks

[d6u]

@tonyxiao After some thinking, I'm hesitated to pass down width and height to wrapped component due to performance concerns. However, I see why you need this feature. So here I want to ask a few things before implementation.

Performance concerns

If you are using higher order component API, passing down width and height to child component will make child to rerender because of new props. When component is resizing the width and height changes very frequent. Since underneath it's using requestAnimationFrame to look up the width and height, child component could be passed with new props more than 10 times per second which will cause performance problem.

Workaround

Fortunately, when designing the API, I left an option that uses mixin. I know mixin is "lame" (¯\_(ツ)_/¯) in React nowadays, but I see no official notes about deprecating it. In fact, the higher order component is just a wrapper around the mixin.

Here is how it will work for you. If you use createContainerQueryMixin(query, [opts]), it will set a _size property on the component. This property is what you want to use, but currently there is no way for you to conveniently know when the value has changed (containerQueryDidUpdate, available when you use mixin API, is only called when the query is change, not when width or height is changed). So for this to work for you, I could create a width or height did change hook for the mixin. But at the end, you have to use the mixin, which again, is "lame" (¯\_(ツ)_/¯) in React community nowadays.

How does that sound to you, do you think mixin API is cool enough 😄 ?

[tonyxiao]

Hey @d6u , thanks so much for the extensive consideration. I think that's more than enough. Isolated uses of Mixin should be ok anyways. For what it's worth I also considered this lib - https://github.com/ctrlplusb/react-sizeme. Do you have any thoughts?

[d6u]

@tonyxiao react-sizeme looks really nice! I think they will perform better than react-container-query due to there resize detection strategy. One caveat about scroll strategy, it will place a div element inside the container and change position of container to relative.

So depends on your requirements, that might not be a desire thing for you. However, the benefit is that it should perform much better.