Fresnel shader

For example, children of this Media declaration will only be visible if the viewport width is between 0 and 768 (768 not included) points:

While the Basic and SSR examples will get one pretty far, @artsy/fresnel can do a lot more. For an exhaustive deep-dive into its features, check out the Kitchen Sink app.

Use this to declare that children should only be visible while the viewport width is equal to the start offset of the first specified breakpoint but less than the start offset of the second specified breakpoint.

The browser receives markup with proper media query styling and will immediately start rendering the expected visual result for whatever viewport width the browser is at.

@artsy/fresnel works great with Gatsby or Next.js's static hybrid approach to rendering. See the examples below for a simple implementation.

Fresnel pronunciation

If you would like to avoid the underlying div that is generated by and instead use your own element, use the render-props form but be sure to not render any children when not necessary:

Besides the Media and MediaContextProvider components, there's a createMediaStyle function that produces the CSS styling for all possible media queries that the Media instance can make use of while markup is being passed from the server to the client during hydration. If only a subset of breakpoint keys is used those can be optional specified as a parameter to minimize the output. Be sure to insert this within a