Fresnel screenshot

Fresnel

Author Avatar Theme by Artsy
Updated: 1 Feb 2025
1275 Stars

An SSR compatible approach to CSS media query based responsive layouts for React.

Categories

Overview:

The Fresnel equations are a set of mathematical expressions describing the reflection of light at the interface between different optical media. The @artsy/fresnel package extends this concept into the React world, allowing for responsive components that adapt based on breakpoints.

Features:

  • Responsive Components: Automatically adjust based on breakpoints defined in the component.
  • Server-side Rendering Support: All breakpoints get rendered on the server side for improved performance.
  • Easy Integration: Simple setup for integrating with React applications.
  • Works with Gatsby and Next.js: Compatible with static and server-side rendering approaches.

Installation:

To install @artsy/fresnel, you can use npm or yarn:

# Using npm
npm install @artsy/fresnel

# Using yarn
yarn add @artsy/fresnel

Summary:

The @artsy/fresnel package allows for the creation of responsive components in React applications by using breakpoints. It supports server-side rendering, improving performance by rendering all breakpoints on the server. With easy integration and compatibility with frameworks like Gatsby and Next.js, @artsy/fresnel provides a convenient solution for building adaptive user interfaces.