Component that represents a layout composition.
Composition inherits from Box component, thus is accepts the same props and CSS Grid props on top.
Prop name | Type | Description |
|
| Renders composition with |
Composition supports all Prop aliases.
Composition begins by defining a template string that consists of layout (grid) areas.
const areasMobile = `logomenu`
Template string is just an alias for grid-template-areas
.
Since Atomic layout comes with responsive built-in, you can define multiple layout templates for a single composition based on the breakpoints of your layout.
const areasTablet = `logo menusearch search`
Once layout templates are defined, pass them as the respective areas
props of the Composition. Each area in the template is turned into a React component and being exposed as an argument property of the children function:
<Compositionareas={areasMobile}areasMd={areasTablet}>{(Areas) => (<><Areas.Logo>...</Areas.Logo><Areas.Search>...</Areas.Search><Areas.Menu>...</Areas.Menu></>)}</Composition>
Generated area components are exposed as unique capitalized keys of the children function.
Composition is meant to be configurable. There is a set of Prop aliases you can apply to make composition suit your needs. For example, we can specify a templateCols
prop to control the behavior of our columns on different breakpoints:
<Compositionareas={areasMobile}areasMd={areasTablet}templateCols="1fr auto"templateColsMd="1fr 1fr" />
Composition can be used without any templates. In that case it serves as a display: grid
wrapper for its children elements. All Prop aliases still apply.
import React from 'react'import { Composition } from 'atomic-layout'​export const Header = () => (<Composition templateCols="repeat(3, 1fr)"><Logo /><Menu /><Actions /></Composition>)
Note that using the Box component is recommended when you don't wish to control elements composition, but want to distribute spacial relation of the parent element.
src/components/ArtistCard/index.jsximport React from 'react'import { Composition } from 'atomic-layout'​const areasMobile = `thumbnailheadingcontent`​const areasDesktop = `thumbnail headingthumbnail content`​export const ArtistCard = ({ title, imageUrl, description }) => (<Compositionareas={areasMobile}areasMd={areasDesktop}gap={10}gapMd={20}padding={10}>{(Areas) => (<><Areas.Thumbnail><img src={imageUrl} alt={title} /></Areas.Thumbail><Areas.Heading><h3>{title}</h3></Areas.Heading><Areas.Content><p>{description}</p></Areas.Content></>)}</Composition>)
components/ArtistCard/index.jsximport React from 'react'import { Composition } from 'atomic-layout'import ArtistContent from './ArtistContent'​const areasMobile = `thumbnailcontent`​export const ArtistCard = ({title,description,publishDate,imageUrl,onShareClick}) => (<Composition areas={areasMobile}>{(Areas) => (<><Areas.Thumbnail><img src={imageUrl} alt={title} /></Areas.Thumbnail><Areas.Content><ArtistContentdescription={description}publishDate={publishDate}onShareClick={onShareClick} /></Areas.Content></>)}</Composition>)
components/ArtistCard/ArtistContent.jsximport React from 'react'import { Composition } from 'atomic-layout'​const areasMobile = `metaactionstext`​const areasTablet = `meta actionstext text`​export const ArtistContent = ({ description, publishDate, onShareClick }) => (<Compositionareas={areasMobile}areasMd={areasTablet}gap={10}gapMd={20}>{({ Meta, Actions, Text }) => (<><Meta>{publishDate}</Meta><Actions><button onClick={onShareClick}>Share</button></Actions><Text>{description}</Text></>)}</Composition>)
It is possible to describe the size of each column/row using a shorthand grid-template
syntax.
To specify a row size put its numeric value right after the row areas declaration.
To specify a column size put a trailing slash (/
) and provide each column's dimensions after it.
import React from 'react'import { Composition } from 'atomic-layout'​const templateTablet = `meta actions 250pxtext text 1fr/ 500px auto`​export const ArtistContent = ({ description, publishDate, onShareClick }) => (<Composition template={templateTablet}>{(Areas) => (<><Areas.Meta>{publishDate}</Areas.Meta><Areas.Actions><button onClick={onShareClick}>Share</button></Areas.Actions><Areas.Text>{description}</Areas.Text></>)}</Composition>)
Note that in order to use grid-template
syntax you must provide the template string as a value of the template
prop of the Composition component.