# 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](https://701778105-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDfdP5_KiHky6KSny85%2F-LFX4oRP1Qbq38STOr3z%2F-LFX4rAEPBvFDSYdbinJ%2Fresponsive-prop.png?alt=media\&token=4ccf46e8-3f0d-480c-abb6-5f0b1511140d)

### **Prop name**

Any [Prop alias](https://redd.gitbook.io/atomic-layout/fundamentals/prop-aliases) can be used as a responsive prop name.

{% hint style="info" %}
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`](https://redd.gitbook.io/atomic-layout/api/hooks/use-responsive-props) and [`useResponsiveComponent`](https://redd.gitbook.io/atomic-layout/api/utilities/use-responsive-component) hooks.
{% endhint %}

### Breakpoint name

*(Optional)* A breakpoint name from one of the configured [breakpoints](https://redd.gitbook.io/atomic-layout/fundamentals/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.

{% hint style="success" %}
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.
{% endhint %}

## 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

```jsx
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

```jsx
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

```jsx
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".