{"repo":"artsy/fresnel","free":true,"listed":false,"github":"https://github.com/artsy/fresnel","clone":"git clone https://github.com/artsy/fresnel.git","description":"An SSR compatible approach to CSS media query based responsive layouts for React.","language":"TypeScript","stars":1297,"topics":["react","responsive","media-queries","ssr","nextjs","react-18"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"@artsy/fresnel [![CircleCI][ci-icon]][ci] [![npm version][npm-icon]][npm] The Fresnel equations describe the reflection of light when incident on an interface between different optical media. – https://en.wikipedia.org/wiki/Fresnel equations Installation Table of Contents - Overview - Basic Example - Server-side Rendering (SSR) - Usage with Next - Example Apps - Why not conditionally render? - API - Pros vs Cons - Development Overview When writing responsive components it's common to use media queries to adjust the display when certain conditions are met. Historically this has taken place directly in CSS/HTML: By hooking into a breakpoint definition, @artsy/fresnel takes this declarative approach and brings it into the React world. Basic Example Server-side Rendering (SSR) Usage The first important thing to note is that when server-rendering with @artsy/fresnel , all breakpoints get rendered by the server. Each Media component is wrapped by plain CSS that will only show that breakpoint if it matches the user's current browser size. This means that the client can accurately start rendering the HTML/CSS while it receives the markup, which is long before the React application has booted. This improves perceived performance for end-users. Why not just render the one that the current device needs? We can't accurately identify which breakpoint your device needs on the server. We could use a library to sniff the browser user-agent, but those aren't always accurate, and they wouldn't","default_branch":null,"files":null,"tree":[],"storefront":"/r/artsy","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/artsy/fresnel/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}