Atomic Layout Versions Save

Bug fixes

• Fixes an issue that resulted into the useResponsiveValue hook value not being updated when one of its dependencies updates (#326, #327).

Bug fixes

• Fixes an issue that resulted into area component losing their state when parent updated (#320, #321)

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;
  }
`

Changes

• Removes the <MediaQuery/> component (#309, #313). Please replace its usage in your code with the useMediaQuery hook:

- import { MediaQuery } from 'atomic-layout'
+ import { useMediaQuery } from 'atomic-layout'

const Usage = () => {
+  const matches = useMediaQuery({ minWidth: '500px' })

  return (
-  <MediaQuery minWidth="500px">
-    {matches => matches && <p>Conditional content</p>}
-  </MediaQuery>
+  {matches && <p>Conditional content</p>}
  )
}

Bug fixes

• Fixes an issue that resulted into the library's README being broken on NPM (#277)

This is published as a minor release, since in case you have a wrongly typed responsive props (i.e. templatelg) they worked in the previous release, but will stop doing so in this one.

Bug fixes

• Fixes an issue when providing a lowercase responsive prop would register its behavior/breakpoint (#296, #312)

Features

• Adds a new useResponsiveQuery hook (docs)

Bug fixes

• Fixes an issue that resulted Only to remount its children when the parent component has been updated (#308 , #310)

Bug fixes

• Exported components now come with a meaningful displayName property for easier debugging in React DevTools (#306)

Bug fixes

• Fixes an issue that prevented forwarding of refs with useResponsiveComponent (#263, #264)
• Fixes an issue that prevented components to be re-rendered upon props change with useResponsiveProps (#265, #267)

Features

• Supports order CSS property on Box component and area components generated by Composition (#300)

This release does not introduce new features, but changes the way Atomic Layout functions internally. It's recommended to update to 0.12.0 to test the changes and be ready for the upcoming features.

Internal

• Restructures Atomic Layout to be a monorepo
• A monorepo includes @atomic-layout/core library and a single rendering implementation atomic-layout (styled-components) for backward-compatibility