How to use @artsy/fresnel - 4 common examples

import { createMedia } from '@artsy/fresnel'
import reduce from 'lodash/reduce'

import theme from '@helpers/theme'

const breakpoints = reduce(theme.global.breakpoints, (acc, breakpoint, size) => {
  if (breakpoint.value) {
    acc[size] = breakpoint.value
  }
  return acc
}, { default: 0 })

const AppMedia = createMedia({ breakpoints })

// Generate CSS to be injected into the head
export const mediaStyle = AppMedia.createMediaStyle()
export const { Media, MediaContextProvider } = AppMedia

import { createMedia } from "@artsy/fresnel"

const ExampleAppMedia = createMedia({
  breakpoints: {
    xs: 0,
    sm: 768,
    md: 1000,
    lg: 1200,
  },
})

// Make styles for injection into the header of the page
export const mediaStyles = ExampleAppMedia.createMediaStyle()

export const { Media, MediaContextProvider } = ExampleAppMedia

import { createMedia } from "@artsy/fresnel"

const ExampleAppMedia = createMedia({
  breakpoints: {
    xs: 0,
    sm: 500,
    md: 1000,
    lg: 1200,
  },
  interactions: {
    hover: "(pointer: coarse), (-moz-touch-enabled: 1)",
    notHover:
      "not all and (pointer: coarse), not all and (-moz-touch-enabled: 1)",
  },
})

export const mediaStyle = ExampleAppMedia.createMediaStyle()

export const {

import React from "react"
import ReactDOM from "react-dom"
import { createMedia } from "@artsy/fresnel"

const ExampleAppMedia = createMedia({
  breakpoints: {
    xs: 0,
    sm: 768,
    md: 1000,
    lg: 1200,
  },
})

const { Media, MediaContextProvider } = ExampleAppMedia

const App = () => {
  return (
    
      Hello mobile!
      Hello desktop!