Responsive props

What is a "responsive prop"?

"Responsive prop" is a concept specific to Atomic Layout library. It allows to suffix a prop name with a breakpoint in order to apply the value of that prop on that breakpoint. You can control a breakpoint and responsive behavior to get the most of responsive props.

Responsive props is an essential feature as it dramatically shortens the declaration of various spacing-related CSS properties, allowing you to declare their responsive changes in a few lines of code.

Declaration

To declare a responsive prop follow this pattern:

propName + ?breakpointName + ?behavior

Prop name

Any Prop alias can be used as a responsive prop name.

Note that not all props are supported as responsive. In order to preserve an idiological approach of the library you won't be able to use arbitrary props like textAlign or backgroundColor as responsive, by dedfault.

If you require the responsive support for arbitrary props see the useResponsiveProps and useResponsiveComponent hooks.

Breakpoint name

(Optional) A breakpoint name from one of the configured breakpoints.

Behavior

(Optional) Behavior describes how a responsive prop is applied.

• up (Default) — Applies the given value from the specified breakpoint and up;

• down — Applies the given value from the specified breakpoint and down;

• only — Applies the given value only for the specified breakpoint.

Atomic Layout is mobile-first. This means that by default all responsive props are applied starting from the given breakpoint and up. You can change this by providing a custom behavior value to a responsive prop.

Defaults

• Default breakpoint behavior is up,

• Default measurement unit for numeric prop values is px,

• When not suffixed, any prop value is applied for xs breakpoint and up.

Examples

Mobile-first

import React from 'react'
import { Box } from 'atomic-layout'

export const Header = ({ children }) => (
  <Box
    paddingVertical={10}
    paddingVerticalMd={20}
    paddingVerticalLg={30}
  >
    {children}
  </Box>
)

Responsive props in areas

import React from 'react'
import { Composition } from 'atomic-layout'

export const Post = ({ title, content }) => (
  <Composition
    areas={`
      header
      content
    `}
    gap={10}
    gapLg={20}
  >
    {(Areas) => (
      <>
        <Areas.Header paddingSmOnly={10}>
          <h3>{title}</h3>
        </Areas.Header>
        <Areas.Content>
          <p>{content}</p>
        </Areas.Content>
      </>
    )}
  </Composition>
)

Areas generated by the Composition component support Responsive props as well.

Excluding a single prop

import React from 'react'
import { Composition } from 'atomic-layout'

export const Post = () => (
  <Composition areas="left right">
    {(Areas) => (
      <Areas.Left
        padding={10}
        paddingMdOnly="initial"
      >
        Right area
      </Areas.Left>
      <Areas.Right>Left area</Areas.Right>
    )}
  </Composition>
)

In the example above the padding={10} declaration applies padding: 10px on all screens, starting from "xs" and up. However, on the "md" screen the padding declaration is rewritten by paddingMdOnly and its value is set to "initial".