[email protected]

Breaking changes

• useResponsiveComponent() function has been renamed to makeResponsive() in order to prevent a confusion over that function being a React hook (which it's not).

- import { withResponsiveComponent } from 'atomic-layout'
+ import { makeResponsive } from 'atomic-layout'

const Image = styled.img``

- export default withResponsiveComponent(Image)
+ export default makeResponsive(Image)

<Image src="small.png" srcMd="large.png" />

Features

• Adds a new query() utility function for shorthand composition of inline media queries aligned with your Layout options:

import styled from 'styled-components'
import { query } from 'atomic-layout'

const Component = styled.div`
  @media ${query({ from: 'md' })} {
    background-color: red;
  }
`