---
description: Переопределяет базовую адаптивность компонента – глобально или локально.
tags: provider
---
# AdaptivityProvider [tag:component]
Переопределяет базовую [адаптивность](/overview/adaptivity) компонента – глобально или локально. Принимает все доступные
[параметры адаптивности](/overview/adaptivity#adaptivity-props).
## Когда использовать? [#when-to-use]
- Если вам нужно зафиксировать размер компонента на `compact` или `regular` (см. [Адаптивность | Размеры элементов интерфейса](/overview/adaptivity#density)).
- Если вам нужно зафиксировать конкретный брейкпоинт на мобильный, планшетный, настольный и т.п. (см. [Адаптивность | Размеры экрана](/overview/adaptivity#breakpoints)).
- Если вам нужно зафиксировать поведение компонента (см. [Адаптивность | Наличие точного указателя](/overview/adaptivity#pointer)).
## Логика работы
`AdaptivityProvider` всегда перебивает свой вышестоящий экземпляр – это значит, что свойства не наследуются из контекста.
Говоря о свойствах, по умолчанию они определяются как `undefined`. Автоматически определение есть только у свойства `density` при
условии, что заданы `viewWidth` и `viewHeight` или `viewWidth` и `hasPointer` или только `viewHeight`.
## Глобальное переопределение [#override-global]
Оборачиваем в `AdaptivityProvider` всё приложение.
```jsx filename="index.js" {9}
import { ConfigProvider, AdaptivityProvider, AppRoot, ViewWidth } from '@vkontakte/vkui';
/**
* Зашили верстку и поведение под настольные экраны.
*/
export function AlwaysDesktopWithMouse() {
return (
{/* приложение */}
);
}
```
## Локальное переопределение [#override-local]
В необходимом месте отдельно оборачиваем компонент или ряд компонентов в `AdaptivityProvider`.
```jsx {8}
import { AdaptivityProvider, Button } from '@vkontakte/vkui';
/**
* Зашили высоту кнопки в "regular" размере.
*/
export function ReallyBigButton() {
return (
);
}
```
## Хук useAdaptivity [#use-adaptivity]
Хук возвращает из контекста свойства, переданные в `AdaptivityProvider`.
```jsx filename="example.jsx"
import { AdaptivityProvider, useAdaptivity } from '@vkontakte/vkui';
function AdaptivityPropsByContext() {
const {
density = 'undefined',
viewWidth = 'undefined',
viewHeight = 'undefined',
hasPointer = 'undefined',
} = useAdaptivity();
return (