How to use @artsy/fresnel - 4 common examples

To help you get started, we’ve selected a few @artsy/fresnel examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zooniverse / front-end-monorepo / packages / app-project / src / shared / components / Media / Media.js View on Github external
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
github artsy / fresnel / examples / gatsby / src / Media.tsx View on Github external
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
github artsy / fresnel / examples / kitchen-sink / src / Media.tsx View on Github external
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 {
github artsy / fresnel / examples / basic / src / client.tsx View on Github external
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!

@artsy/fresnel

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

MIT
Latest version published 2 months ago

Package Health Score

84 / 100
Full package analysis

Popular @artsy/fresnel functions