Atomic Layout
  • Introduction
  • Motivation
  • Resources
  • FAQ
    • Comparison with styled-system
  • Getting started
    • Installation
    • First composition
    • Responsive composition
    • Nested composition
  • Fundamentals
    • Breakpoints
    • Prop aliases
    • Responsive props
  • API
    • Layout
      • configure()
    • Components
      • Box
      • Composition
      • Only
      • Visible
    • Hooks
      • useMediaQuery
      • useResponsiveQuery
      • useViewportChange
      • useBreakpointChange
      • useResponsiveValue
      • useResponsiveProps
    • Utilities
      • query
      • makeResponsive
  • Recipes
    • Semantics
    • Namespaces
    • Iterative areas
    • Responsive layout
    • Explicit media query
Powered by GitBook
On this page
  • Specification
  • Alternative declaration
  • Example
  1. API
  2. Utilities

makeResponsive

PreviousqueryNextSemantics

Last updated 5 years ago

Specification

makeResponsive is a high-order component designed for providing to any given React component.

Alternative declaration

Apart from makeResponsive, you can use useResponsiveProps hooks to proxy a map of props and resolve them based on the current breakpoint.

components/Image.jsx
import React from 'react'
import { useResponsiveProps } from 'atomic-layout'

export const Image = (props) => {
  const { url, size } = useResponsiveProps(props)
  return <img src={url} height={size} width={size} />
}

Such declaration, however, is lengthy and results into repeated logic when used frequently.

Example

components/Image.jsx
import React from 'react'
import { makeResponsive } from 'atomic-layout'

const Image = ({ url, size }) => (
  <img src={url} height={size} width={size} />
)

export default makeResponsive(Image)
import React from 'react'
import Image from './Image'

const Post = () => (
  <Image
    src="mobile.jpg"
    srcMd="post-tablet.jpg"
    srcLg="post-large.jpg"
    size={50}
    sizeMd={75}
    sizeLg={125}
  />
)

export default Post

Responsive props