makeResponsive

Search…

makeResponsive

Specification
makeResponsive is a high-order component designed for providing Responsive props 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
1
import React from 'react'
2
import { useResponsiveProps } from 'atomic-layout'
3
​
4
export const Image = (props) => {
5
  const { url, size } = useResponsiveProps(props)
6
  return <img src={url} height={size} width={size} />
7
}
Copied!
Such declaration, however, is lengthy and results into repeated logic when used frequently.
Example
Image.jsx
Post.jsx
components/Image.jsx
1
import React from 'react'
2
import { makeResponsive } from 'atomic-layout'
3
​
4
const Image = ({ url, size }) => (
5
  <img src={url} height={size} width={size} />
6
)
7
​
8
export default makeResponsive(Image)
Copied!
1
import React from 'react'
2
import Image from './Image'
3
​
4
const Post = () => (
5
  <Image
6
    src="mobile.jpg"
7
    srcMd="post-tablet.jpg"
8
    srcLg="post-large.jpg"
9
    size={50}
10
    sizeMd={75}
11
    sizeLg={125}
12
  />
13
)
14
​
15
export default Post
Copied!
​

query

Next - Recipes

Semantics

Last modified 1yr ago

Copy link

Contents

Specification

Alternative declaration

Example