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 mountLayout.configure(options)}, [])return <Tree />}​ReactDOM.render(<App />, document.getElementById('root'))
Value type |
|
Default value |
|
Description | Default measurement unit used as a suffix for numeric prop values. |
src/App.jsximport Layout from 'atomic-layout'​Layout.configure({defaultUnit: 'rem',})
src/components/SomeComponent.jsx<Composition gap={2} /> // reads as "2rem" of "grid-gap"
Value type |
|
Default value |
|
Description | Breakpoint behavior used for responsive props without explicit behavior. |
src/App.jsximport Layout from 'atomic-layout'​Layout.configure({defaultBehavior: 'down',})
src/components/SomeComponent.jsx<Compositiontemplate={...}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.
Value type |
|
Default value | Bootstrap 4 breakpoints |
Description | A map of custom breakpoints. |
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,}
src/App.jsximport Layout from 'atomic-layout'​Layout.configure({breakpoints: {mobile: {maxWidth: 500,},tablet: {minWidth: 501,maxWidth: 764,},retina: {minResolution: '300dpi',},},})
src/components/SomeComponent.jsx<CompositionareasMobile={...}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.
Value type |
|
Default value |
|
Description | The name of a default breakpoint used for the props without an explicit breakpoint suffix. |
src/App.jsximport Layout from 'atomic-layout'​Layout.configure({defaultBreakpointName: 'mobile',breakpoints: {mobile: {maxWidth: 576,},desktop: {minWidth: 768,},},})
src/components/SomeComponent.jsx<Compositionpadding={...}paddingDesktop={...} />
Breakpoint-less padding
prop is now applied on the mobile
breakpoint by default.