Atomic Layout Versions Save

Features

• Adds new <Visible> component that conditionally displays given children:

import React from 'react'
import { Visible } from 'atomic-layout'

const Page = () => (
  <div>
    <Visible from="md">Content</Visible>
  </div>
)

Visible works similar to Only, but unlike the latter it renders and visually hides the children. It's a useful pattern for SSR and React components tree hydration.

Bug fixes

• Fixes an issue where Only (and other components that deal with conditional rendering) children would stagger during the parent's re-rendering (#234, #254)

Internal

• Dramatically improves our Contributing guidelines, which now reside in the repository instead of a remote documentation

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

Features

• The library is now distributed in CommonJS, UMD and ESM modules (#125)
• Compliance with unpkg. The library can be included via CDN:

<script src="https://unpkg.com/atomic-layout/umd/index.js"></script>

• Supports extended grid-template syntax to define CSS Grid areas, rows and columns in a single template definition (#113)

// Define grid row/columns and areas
const template = `
  thumbnail heading 1fr
  thumbnail actions 100px
  / 200px 1fr
`

<Composition template={template}>
  {({ Thumbnail, Heading, Actions }) => (
    <React.Fragment>
      <Thumbnail>{...}</Thumbnail>
      <Heading>{...}</Heading>
      <Actions>{...}</Actions>
    </React.Fragment>
  )}
</Composition>

Bug fixes

• Fixes an issue that resulted into Layout.configure() to throw "missing options" exception upon initial instantiation of the Layout class (#173, #176)
• Provides faster debounce duration for useViewportChange for smooth components re-render on breakpoint change (#167)

Dependencies

• Updates the package's dependencies to the latest versions

Announcements

• This library no longer supports Internet Explorer of any version
• From this point on the API will start to move towards its final version, preparing to 1.0 release. Any consequent API changes will be released in a backward-compatible manner as minor versions.

Features

• Atomic layout is now written entirely in TypeScript, improving the experience of both contributors and users (#87)
• Uses Proxy to allow references and render attempts of potentially non-existent template areas
• Supports dynamic template areas (i.e. changed on runtime) (#78)
• Prints warning on multiple attempts to call Layout.configure() (#63)
• Prints warning when trying to render an area component that is not defined in a template string (#63)
• All components exported from the library are now polymorphic (thank to styled-components), which means you can specify which component to render instead of a default div:

<Composition as={Header} {...}>
  {({ SomeArea }) => (
    <SomeArea as="nav" />
  )}
</Composition>

Bug fixes

• Fixes an unexpected behavior when CSS properties with undefined value had undefined as the outputted value (#79)
• The library is no longer shipped as minified, making debugging much easier

Dependencies

• Updates to react-responsive@6
• Updates various dev dependencies

Features

• Introduces useViewportChange hook
• Introduces useBreakpointChange hook
• Introduces useResponsiveValue hook
• Introduces useResponsiveProps hook
• Added gap prop alias to semantically alias grid-gap (instead of previous gutter)

Changes

• Layout options are now stored under root level of Layout instance (#153)

Features

• Adds grid-auto-rows, grid-auto-columns and grid-auto-flow prop aliases (#130)

Bug fixes

• Fixes the package's built containing import aliases, which resulted into broken TypeScript support (#141)
• Fixes nodes mismatch during ReactDOM.hydrate call upon a conditional portion of a tree when rendering with Only component (#117)
• Fixes the issue that resulted into custom CSS properties being overridden by grid-area property when assigning on the generated area component. This broke the Iterative areas recipe.

<Composition areas="singleArea">
  {({ SingleArea }) => data.map((entry) => (
    <SingleArea key={entry.id} col="auto">{entry.title}</SingleArea>
  ))}
</Composition>

Announcements

• Atomic layout is now dependency-free. We have removed react-responsive dependency due to its sub-dependencies issues in stale packages.

Features

• Adds support for areas prop on Composition, aliasing grid-template-areas (#123)
• Adds support for flexDirection, flexWrap, flexGrow and flexShrink prop aliases on Box model

Bug fixes

• Fixes an issue that resulted into exceptions during SSR (#72)
• Fixes an issue that resulted CSS properties with "0" as a value not being present in the emitted CSS (#100)