---
description: Обязательный компонент, в который нужно обернуть всё приложение.
  В нём инкапсулирована логика управления платформой, темой, локализацией и другими глобальными настройками приложения.
tags: provider
---

<Overview group="configuration">

# ConfigProvider [tag:component]

[Обязательный компонент](/overview/install#step4), в который нужно обернуть всё приложение. В нём инкапсулирована логика управления:

- платформой,
- темой,
- локализацией,
- и другими глобальными настройками приложения.

</Overview>

## Платформа

Влияет на внешний вид компонентов, анимации и поведение интерфейса. Задаётся свойством `platform`.

- `"android"` – используется на настольных и мобильных устройствах под управлением системы Android.
- `"ios"` – используется на мобильных устройствах или планшетах с системой iOS/iPadOS.
- `"vkcom"` – используется командой ВКонтакте. На данный момент она не предназначена для адаптивного интерфейса, используйте её только
  в том случае, если ваше приложение встроено в [vk.com](https://vk.com).

Если не указывать, то значение определяется автоматически на основе браузерной информации.

### Локальное переопределение

Оберните в нужном месте в [`PlatformProvider`](/components/platform-provider).

## Цветовая схема

Задаётся свойством `colorScheme`. Если не указывать, то значение определяется автоматически исходя из настроек операционной системы.

- `"light"` — светлая схема;
- `"dark"` — тёмная схема.

### Локальное переопределение

Оберните в нужном месте в [`ColorSchemeProvider`](/components/color-scheme-provider).

## Локализация

Задаётся свойством `locale`. Если не указывать, то значение будет равно `"ru"`. В качестве значений принимает строку с
[языковой меткой BCP 47](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).

> Данное свойство само по себе не отвечает за интернационализацию (`i18n`) и локализацию (`L10n`) вашего приложения.
> Для поддержки данной функциональности вам нужно будет воспользоваться сторонними решениями.
> VKUI лишь предоставляет возможность получить указанную локаль посредством вызова хука `useLocale`.
>
> Единственный компонент, на который по умолчанию влияет данной свойство, это `Calendar` (названия месяцев и дней недели).

### Локальное переопределение

Оберните в нужном месте в [`LocaleProvider`](/components/locale-provider).

## Направление контента

Задаётся свойством `direction`. По умолчанию значение определяется автоматически на основе атрибута `dir` на `body` страницы.

- `"ltr"` — направление "слева-направо" (для большинства языков);
- `"rtl"` — направление "справа-налево" (для арабского, иврита и т.д.).

### Локальное переопределение

Оберните в нужном месте в [`DirectionProvider`](/components/direction-provider).

## Токены тем

Задаётся свойством `tokensClassNames`. Позволяет настроить `CSS`-классы для различных тем и платформ.

```jsx
<ConfigProvider tokensClassNames={{ light: 'custom-light-theme', dark: 'custom-dark-theme' }}>
  <App />
</ConfigProvider>
```

## Анимации переходов [#animation]

Задаётся свойством `transitionMotionEnabled`.

- `true` — включены анимации переходов между экранами в [`Root`](/components/root) и [`View`](/components/view);
- `false` — анимации отключены.

## WebView

Задаётся свойством `isWebView`. Значение `true` позволяет приложению определить, что оно запущено в рамках мобильного приложения.

<Callout>
  При `isWebView={true}` и `platform="ios"` для компонента [`View`](/components/view) включается
  возможность навигации через смахивание.
</Callout>

## Хук useConfigProvider [#use-config-provider]

Для получения текущих настроек приложения используйте хук `useConfigProvider`:

```jsx
import { useConfigProvider } from '@vkontakte/vkui';
```

```jsx
const { colorScheme, platform, locale, direction, ...restProps } = useConfigProvider();
```

## Свойства и методы [#api]

### ConfigProvider

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `**children** \*` | `ReactNode` | `-` | Содержимое. |
| `colorScheme` | `ColorSchemeType` | `-` | Тип цветовой схемы – `light` или `dark`. |
| `customPanelHeaderAfterMinWidth` | `string \| number` | `90` | Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский "плавающий" элемент (например, ширина панели управления webview).  Учитывается только при `hasCustomPanelHeaderAfter={true}` (см документацию `hasCustomPanelHeaderAfter`). |
| `direction` | `Direction` | `Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы` | Направление контента.  При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент, либо на все страницу в целом. |
| `hasCustomPanelHeaderAfter` | `boolean` | `-` | При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского "плавающего" элемента (например, панель управления webview).  > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых > библиотекой. |
| `isWebView` | `boolean` | `-` | Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.  В условиях когда: - `isWebView={true}` - platform="ios".  Для компонента `View` включается возможность навигации через смахивание. |
| `locale` | `string` | `-` | Строка с языковой меткой BCP 47. |
| `platform` | `PlatformType` | `-` | Платформа. |
| `tokensClassNames` | `TokensClassNames` | `{
  android: {
    light: 'vkui--vkBase--light',
    dark: 'vkui--vkBase--dark',
  },
  ios: {
    light: 'vkui--vkIOS--light',
    dark: 'vkui--vkIOS--dark',
  },
  vkcom: {
    light: 'vkui--vkCom--light',
    dark: 'vkui--vkCom--dark',
  }
}` | CSS классы, определяющие набор токенов.  - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем. - Используйте `{ [key in 'android' \| 'ios' \| 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов. |
| `transitionMotionEnabled` | `boolean` | `-` | Включена ли анимация переходов между экранами в `Root` и `View`. |

### useConfigProvider

_Не принимает свойств_