configure()
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'))
Value type | String |
Default value | px |
Description | Default measurement unit used as a suffix for numeric prop values. |
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"
Value type | up | down | only |
Default value | up |
Description | Breakpoint behavior used for responsive props without explicit behavior. |
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.Value type | TBreakpoints |
Default value | Bootstrap 4 breakpoints |
Description |
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.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.
Value type | String |
Default value | "xs" |
Description | The name of a default breakpoint used for the props without an explicit breakpoint suffix. |
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.Last modified 3yr ago