---
description: Хук, возвращающий расширенную версию параметров адаптивности.
---

<Overview type="hook" forcedPath="hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.tsx">
# useAdaptivityConditionalRender

Хук возвращает расширенную версию [параметров адаптивности](/overview/adaptivity#adaptivity-props), каждый из которых имеет
дополнительную мета-информацию. Условия реализованы через [CSS Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media).

Связанные страницы:

- [Адаптивность](/overview/adaptivity)
- [Серверный рендер | Примечание к адаптивности](/overview/ssr#adaptivity-note)

</Overview>

## Когда использовать? [#when-to-use]

Используйте когда нужно показать или скрыть элемент интерфейса по тому или иному брейкпоинту.

## API

### Возвращаемое значение

Объект с адаптивными условиями:

| Свойство     | Тип                                                | Описание                                                                 |
| ------------ | -------------------------------------------------- | ------------------------------------------------------------------------ |
| `density`    | `Record<'compact' \| 'regular', false \| { className: string }>` | Условия для плотности интерфейса.                                        |
| `viewWidth`  | `Record<'smallTabletMinus' \| 'smallTabletPlus' \| 'tabletMinus' \| 'tabletPlus', false \| { className: string }>` | Условия для брейкпоинтов ширины экрана.                                  |
| `deviceType` | `Record<'mobile' \| 'desktop', false \| { className: string }>` | Условия для типа устройства.                                             |
| `sizeX`      | `Record<'compact' \| 'regular', false \| { className: string }>` | Устаревшее поле. Используйте `density`.                                  |
| `sizeY`      | `Record<'compact' \| 'regular', false \| { className: string }>` | Устаревшее поле. Используйте `density`.                                  |

## Особенности работы [#behavior-specifics]

Если вы переопределили адаптивность через [`AdaptivityProvider`](/components/adaptivity-provider), то значение у каждого отдельного
параметра адаптивности может быть двух типов:

- `false` – мы строго задали какой-то из параметров адаптивности. Например, при `<AdaptivityProvider viewWidth={ViewWidth.MOBILE}>`
  значение `viewWidth.tabletPlus` будет `false`, т.к. мы говорим, что у нас всегда мобильный вид.

- `{ className: string }` – в CSS-класс, который на основе CSS Media Query будет переключать видимость вашего элемента через `display: none`.

## Пример использования [#example]

Показываем дополнительную колонку только для `tabletPlus` и применяем `className` из хука, чтобы условие работало через CSS Media Query.

{/* @example-description: Колонка для tabletPlus. */}
<Playground direction="column" align="stretch">
  ```jsx
  const { viewWidth, density } = useAdaptivityConditionalRender();

  return (
    <Flex direction="column" gap="m" inlineSize="100%">
      <Caption level="1">
        `tabletPlus`: {viewWidth.tabletPlus ? "активен" : "выключен (переопределено через AdaptivityProvider)"}
      </Caption>
      <Caption level="1">
        `density.compact`: {density.compact ? "активен" : "выключен (переопределено через AdaptivityProvider)"}
      </Caption>

      <Group>
        <Flex direction="column" gap="xl">
          {viewWidth.tabletPlus && (
            <Card className={viewWidth.tabletPlus.className}>
              <Box padding="system">
                Дополнительная колонка (видна только на tabletPlus)
              </Box>
            </Card>
          )}

          <Card>
            <Box padding="system">
              Основной контент
            </Box>
          </Card>
        </Flex>
      </Group>
    </Flex>
  );
  ```
</Playground>