configure()

Specification
Applies global layout configuration.
Layout is meant to be configured once, on the root level of your application.
Calling Layout.configure() on your application's root mount is usually a good place:
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import Layout from 'atomic-layout'
​
const App = () => {
  useEffect(() => {
    // A single call to configure layout upon App's mount
    Layout.configure(options)
  }, [])
  
  return <Tree />
}
​
ReactDOM.render(<App />, document.getElementById('root'))
Options
defaultUnit
Value type
String
Default value
px
Description
Default measurement unit used as a suffix for numeric prop values.
Example
src/App.jsx
import Layout from 'atomic-layout'
​
Layout.configure({
  defaultUnit: 'rem',
})
src/components/SomeComponent.jsx
<Composition gap={2} /> // reads as "2rem" of "grid-gap"
defaultBehavior
Value type
up | down | only
Default value
up
Description
Breakpoint behavior used for responsive props without explicit behavior.
Example
src/App.jsx
import Layout from 'atomic-layout'
​
Layout.configure({
  defaultBehavior: 'down',
})
src/components/SomeComponent.jsx
<Composition
  template={...}
  templateMd={...} />
Template prop value is applied for md breakpoint and down, as contrary to the default, mobile-first behavior, which applies the value from the given breakpoint and up.
breakpoints
Value type
TBreakpoints
Default value
Bootstrap 4 breakpoints
Description
A map of custom breakpoints.
Type definition
type TBreakpoint = {
  minHeight?: number,
  maxHeight?: number,
  minWidth?: number,
  maxWidth?: number,
  minResolution?: string,
  maxResolution?: string,
  aspectRatio?: string,
  minAspectRatio?: string,
  maxAspectRatio?: string,
  scan?: 'interlace' | 'progressive',
  orientation?: 'portrait' | 'landscape',
  displayMode?: 'fullscreen' | 'standalone' | 'minimal-ui' | 'browser',
}
​
type TBreakpoints = {
  [breakpointName: string]: TBreakpoint,
}
Example
src/App.jsx
import Layout from 'atomic-layout'
​
Layout.configure({
  breakpoints: {
    mobile: {
      maxWidth: 500,
    },
    tablet: {
      minWidth: 501,
      maxWidth: 764,
    },
    retina: {
      minResolution: '300dpi',
    },
  },
})
src/components/SomeComponent.jsx
<Composition
  areasMobile={...}
  areasTablet={...}
  paddingRetina={10} />
Make sure to explicitly provide a default breakpoint name when using custom breakpoints, so Atomic Layout knows when to apply props that have no breakpoint suffix.
defaultBreakpointName
Value type
String
Default value
"xs"
Description
The name of a default breakpoint used for the props without an explicit breakpoint suffix.
Example
src/App.jsx
import Layout from 'atomic-layout'
​
Layout.configure({
  defaultBreakpointName: 'mobile',
  breakpoints: {
    mobile: {
      maxWidth: 576,
    },
    desktop: {
      minWidth: 768,
    },
  },
})
src/components/SomeComponent.jsx
<Composition
  padding={...}
  paddingDesktop={...} />
Breakpoint-less padding prop is now applied on the mobile breakpoint by default.