Responsive props
"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.
To declare a responsive prop follow this pattern:

propName + ?breakpointName + ?behavior
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.(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.
- 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 andup
.
import React from 'react'
import { Box } from 'atomic-layout'
export const Header = ({ children }) => (
<Box
paddingVertical={10}
paddingVerticalMd={20}
paddingVerticalLg={30}
>
{children}
</Box>
)
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.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".Last modified 3yr ago