Responsive Utility for external libraries

[mmailaender]

Is there a utility to use responsive breakpoints together with external libraries?

e.g., I'm using ReactFlow, and there is a DefaultViewPort property. I want to do something like that:

{s: { x: 15, y: 0, zoom: 0.5} l: { x: 0, y: 0, zoom: 1}}

[blvdmitry]

I don't think it's possible right now. Our responsive utilities are not actually resolving the styles in runtime, since that would work only on the client. Instead they resolve the props you pass to classNames and variables and returned values do not depend on the viewport size.

The actual runtime resolving happens on the CSS side and that allows our component to render consistently across client and server. I can still add another utility that would do a similar resolving for any passed values but it will only work on the client (and can potentially fallback to some default value). Would that work?

[mmailaender]

If you're talking about only client-side support, do you refer to the limitations of Emotion in the context of React Server Components?

I think Client-side would be a good starting point. Long-term, it would also be great to have SSR/RSC support to get better performance for static content.

[blvdmitry]

I also mean server side rendering in general since on the server there is no information about the browser viewport. So initially that can be a solution where you can:

1. Pass a defaultViewport to Reshaped (in case you're detecting that with a user agent)
2. Render ReactFlow only on the client
3. Default to the most popular viewport size and then update it on the client

[blvdmitry]

Merging this for the next release