makeResponsive
is a high-order component designed for providing Responsive props to any given React component.
Apart from makeResponsive
, you can use useResponsiveProps
hooks to proxy a map of props and resolve them based on the current breakpoint.
components/Image.jsximport 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.
components/Image.jsximport 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 = () => (<Imagesrc="mobile.jpg"srcMd="post-tablet.jpg"srcLg="post-large.jpg"size={50}sizeMd={75}sizeLg={125}/>)export default Post