Atomic Layout Files

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).

  :::diff - 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:

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

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