react-grid-area
v0.4.3
Published
Filter grid areas according to the css gridTemplate property
Downloads
95
Readme
react-grid-area
Filter grid areas according to the css grid-template
property.
Background
CSS Grids support templates where each region of the grid can be named. Only named areas within the grid are visible and the layout is defined by the css property. This is extremely powerful, especially for responsive layouts where you might want to change the layout per device or even swap out components for different screen sizes. The only problem with this is that all areas will be rendered, even when not visible with the current template. This might result in your application doing more work than necessary.
react-grid-area attempts to solve this, by only rendering areas explicitly listed in the grid-template
css property.
If you are not already familiar with css grids, then it is highly recommended to read https://css-tricks.com/snippets/css/complete-guide-grid/ or https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Install
yarn add react-grid-area
or
npm install react-grid-area
Constraints
Grid components must be named (in most cases React will take care of this for you). The component name will be used as the css grid area name.
Example Usage
The following TypeScript example shows how react-grid-area could be used as a top level page layout tool.
import React from 'react'
import { Grid, layout } from 'react-grid-area'
import Header from '../Header'
import Footer from '../Footer'
import Menu from '../Menu'
import Faq from '../Faq'
import Home from '../Home'
// arrange the components using the css grid-template property format
// for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
const layouts = {
home_desktop: layout`
"${Header} ${Header}" auto
"${Menu} ${Home}" 1fr
"${Footer} ${Footer}" auto / auto 1fr`,
home_mobile: layout`
"${Header}" auto
"${Home}" 1fr
"${Footer}" auto`,
faq_desktop: layout`
"${Header} ${Header}" auto
"${Menu} ${Faq}" 1fr
"${Footer} ${Footer}" auto / auto 1fr`,
faq_mobile: layout`
"${Header}" auto
"${Faq}" 1fr
"${Footer}" auto`
}
const App: React.FunctionComponent<{ page: string; screenSize: string }> = ({ page, screenSize }) => (
<Grid
layout={layouts[`${page}_${screenSize}`]}
/* optional props will be forwarded to each component in the layout */
props={{ some: 'props' }}
/>
)
Tag and Styling
By default react-grid-area will output a div
tag for the grid container, you can change this by passing a tag name.
For custom styling, react-grid-area supports the className
property.
import { Grid, layout } from 'react-grid-area'
import styled from 'styled-components'
import Page from '../Page'
const StyledGrid = styled(Grid)`
flex-grow: 1;
grid-gap: 1em;
`
const pageLayout = layout`"${Page}"`
export default ({ page, screenSize }) => <StyledGrid tag="main" layout={pageLayout} />
Dynamic values
Layout values can be dynamically generated, so long as dynamic values return either a string or number.
const largeHeader = true
const bodyWidth = '1fr'
const bodyHeight = '1fr'
const layouts = {
home_desktop: layout`
"${Header} ${Header}" ${largeHeader ? 6 : 4}em
"${Menu} ${Home}" ${bodyHeight}
"${Footer} ${Footer}" auto / auto ${bodyWidth}`
}