Viewport component

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

[I might submit a PR about this if I end up with a properly usable implementation myself, just bringing up the idea here]

Having responsive xs/md/lg/xl props are generally great and a lot can be done with them. However, the major problem with them is they are relative to the screen size, not the parent container size.
Take the following usecase: say if a user is logged in, a 500px wide drawer appears for them on the right. If they are logged out, that drawer is not visible. How should the components on the main area behave? Obviously the screen's size is the same, so the 500px reduction in the main area's width won't trigger resize events. But, in fact, the area is 500 pixels less wide, so its child components should behave as if their "screen" was narrower.

Proposal: <Viewport> component that is basically a 100% wide div with resize listeners, feeding its own width into its children. A naive approach is to just listen to window.resize events, and then get the viewport div's width and propgate that to children. A more precise solution would be to listen to the <div>'s resize events.

Implementing with React.Context wouldn't be a good idea, since Viewports can have Viewport children too.

Examples 🌈

No response

Motivation 🔦

No response

No files, tests, or entry points are identified. Start by reviewing the existing responsive xs/md/lg/xl props and resize handling, then determine how a Viewport component could provide parent-width behavior while supporting nested Viewports. Done means a usable implementation matching the proposed behavior.