0.10.0

Features

• Added a new React Hook called useResponsiveComponent for easier declaration of Responsive components with styled-components:

import { useResponsiveComponent } from 'atomic-layout'

const Avatar = styled.img`
  height: ${({ size }) => size}px;
  width: ${({ size }) => size}px;
`

export default useResponsiveComponent(Avatar)

import Avatar from './Avatar'

const Post = () => (
  <Avatar
    src="image-sm.png"
    size={50}
    srcMd="image-md.png"
    sizeMd={75}
  />
)

• Exports the defaultOptions to simplify the declaration of custom options:

import Layout, { defaultOptions } from 'atomic-layout'

Layout.configure({
  breakpoints: {
    ...defaultOptions.breakpoints,
    portrait: {
      orientation: 'portrait'
    }
  }
})

Improvements

• Uses throttle() in all responsive hooks to grant smoother experiences and eliminate UI jumps (#230)
• Declares throttled functions using useRef to preserve functions' identities (#229)
• Fixes event listeners leak in useViewportChange React hook (#232)

Internal

• Simplified the utility function that gets area breakpoints (now "records") based on the given templates definitions
• Re-defined test structure for better contributor's experience and systematized test runs