configure()
Specification
Applies global layout configuration.
Layout is meant to be configured once, on the root level of your application.
CallingLayout.configure() on your application's root mount is usually a good place:
import React, { useEffect }from'react'import ReactDOMfrom'react-dom'import Layoutfrom'atomic-layout'constApp= ()=> {useEffect(()=> {// A single call to configure layout upon App's mountLayout.configure(options) }, [])return <Tree />}ReactDOM.render(<App />,document.getElementById('root'))Options
defaultUnit
defaultUnitValue type
String
Default value
px
Description
Default measurement unit used as a suffix for numeric prop values.
Example
import Layout from 'atomic-layout'Layout.configure({ defaultUnit: 'rem',})<Composition gap={2} /> // reads as "2rem" of "grid-gap"defaultBehavior
defaultBehaviorValue type
up | down | only
Default value
up
Description
Breakpoint behavior used for responsive props without explicit behavior.
Example
import Layout from 'atomic-layout'Layout.configure({ defaultBehavior: 'down',})<Composition template={...} templateMd={...} />Template prop value is applied formd breakpoint anddown, as contrary to the default, mobile-first behavior, which applies the value from the given breakpoint andup.
breakpoints
breakpointsType 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
import Layout from 'atomic-layout'Layout.configure({ breakpoints: { mobile: { maxWidth: 500, }, tablet: { minWidth: 501, maxWidth: 764, }, retina: { minResolution: '300dpi', }, },})<Composition areasMobile={...} areasTablet={...} paddingRetina={10} />Make sure to explicitly provide adefault breakpoint name when using custom breakpoints, so Atomic Layout knows when to apply props that have no breakpoint suffix.
defaultBreakpointName
defaultBreakpointNameValue type
String
Default value
"xs"
Description
The name of a default breakpoint used for the props without an explicit breakpoint suffix.
Example
import Layout from 'atomic-layout'Layout.configure({ defaultBreakpointName: 'mobile', breakpoints: { mobile: { maxWidth: 576, }, desktop: { minWidth: 768, }, },})<Composition padding={...} paddingDesktop={...} />Breakpoint-lesspadding prop is now applied on themobile breakpoint by default.
Last updated