Handle conditional grid areas

[kettanaito]

What

Need to handle conditional grid areas.

Why

Consider:

const templateMobile = `
  'text'
`

const templateTablet = `
  'text subtext'
`

<Layout
  template={templateMobile}
  templateSm={templateTablet}>
  {({ Text, Subtext }) => (...)}
</Layout>

Using this example the Layout will throw when trying to render Subtext on mobile (subtext area is not preset in the template, therefore, its component is not created).

How

1. Maybe creating an "empty" placeholder component for the areas which are not defined:

const Placeholder = () => null

2. Maybe analyze each template to know the fullest list of areas, and create them all, no matter the screen size.

Roadmap

• Implement conditional grid areas
• Break down parseTemplateString composite function into smaller pure functions
• Write unit tests

[kettanaito]

Another idea may be using MediaQuery library to wrap the grid area according to its query size (xs, sm, etc.).

It's also quite fair to expect from the end developer to check for the conditional area existence before rendering it. In the end, it is the end developer who decides on which screen sizes certain areas are visible.

{ Subtext && <Subtext /> }

Benefits

• Solves conditional rendering on different screen sizes

Downsides

• Introduces extra dependency
• Undefined window during SSR?

[kettanaito]

Update

Conditional grid areas were implemented using react-responsive.

Now, whenever conditional area is found, it is being wrapped in <MediaQuery /> with proper minWidth or/and maxWidth to match the requested resolution of the area.