New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Intelligently SSR Responsive Children of Responsive Parents #132
Comments
Hi @rajington - we discuss this in the pros and cons section of the readme, as well as in our blogpost. In short:
|
Thanks for the quick response (and this awesome library!). Apologies if I'm not understanding the README correctly or explaining my thoughts correctly. I really appreciate the approach this library takes to SSR by shipping both, this top-level one makes sense: <div class="fresnel-container fresnel-at-sm">SM</div>
<div class="fresnel-container fresnel-at-md">MD</div> but could we leverage context so that instead of: <div class="fresnel-container fresnel-at-sm">
<div class="fresnel-container fresnel-at-sm">foo</div>
<div class="fresnel-container fresnel-at-md">bar</div>
</div>
<div class="fresnel-container fresnel-at-md">
<div class="fresnel-container fresnel-at-sm">foo</div>
<div class="fresnel-container fresnel-at-md">bar</div>
</div> it renders <div class="fresnel-container fresnel-at-sm">
<div class="fresnel-container fresnel-at-sm">foo</div>
</div>
<div class="fresnel-container fresnel-at-md">
<div class="fresnel-container fresnel-at-md">bar</div>
</div> instead? assuming this is the react tree from the first example: <MediaContextProvider>
<Media at="sm">
<Media at="sm">
foo
</Media>
<Media at="md">
bar
</Media>
</Media>
<Media at="md">
<Media at="sm">
foo
</Media>
<Media at="md">
bar
</Media>
</Media>
</MediaContextProvider> it'd be interesting if each It almost seems like what const Media = props => (
// get all the breakpoints this component COULD render at from Context
const parentBreakpoints = useContext(...
// get all the breakpoints this component is asked to render at from props
const myBreakpoints =
const intersection = ...
if (intersection.length) {
return (
{/* passes down the potential breakpoints to any further nested `Media`s */}
<Provider value={intersection)>
..
</Provider>
);
}
) something like that? i could try something in a codesandbox as well |
This makes sense! If you have time would happily evaluate a PR, but agree this is a great suggestion. |
Nice, great suggestion 👌 |
🚀 Issue was released in |
Sorry I didn't submit PR but thanks for implementing @damassi! |
It was implemented by @kirkness, but thanks to the both of you for the collaboration that led to this! 🚀 |
tweaking the basic example
it actually renders
foo
twice andbar
twice:but wouldn't it be possible to know that the second
foo
would never be visible?this multiplicative growth could even make some trees larger than simply rendering the entire tree for each breakpoint on the server (also allowing the benefit that lower components can use the current breakpoint as a prop rather than wrapping everything in fresnel).
The text was updated successfully, but these errors were encountered: