gatsby-plugin-fresnel

Provides easy drop-in support for @artsy/fresnel in Gatsby.

Install

yarn add gatsby-plugin-fresnel

How to use

Add the plugin to your gatsby-config.js and configure (see fresnel's config API):

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-fresnel`,
      options: {
        breakpoints: {
          sm: 0,
          md: 768,
          lg: 1024,
          xl: 1192,
        },
      },
    },
  ],
};

This package exposes a pre-configured Media component for creating media queries:

import React from 'react';
import { Media } from 'gatsby-plugin-fresnel';

const Home = () => (
  <>
    <Media at="sm">
      <MobileApp />
    </Media>
    <Media at="md">
      <TabletApp />
    </Media>
    <Media greaterThanOrEqual="lg">
      <DesktopApp />
    </Media>
  </>
);

See the @artsy/fresnel README for full documentation.

⚠️ Render behavior

Note that this plugin utilizes the disableDynamicMediaQueries option from @artsy/fresnel to mitigate hydration mismatch errors introduced in React 18. As a result, all children of Media components will be rendered regardless of visibility.

For more information, refer to @artsy/fresnel's README section.