configure()

Specification

Applies global layout configuration.

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} />

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.

Last updated