VKUI — это библиотека адаптивных React-компонентов,
для создания веб-приложений и VK Mini Apps в экосистеме ВКонтакте.
Библиотека основана на дизайн-системе ВКонтакте и реализует её интерфейсы для различных платформ.
Релизы: https://github.com/VKCOM/VKUI/releases.
Гайд по миграции на версию 5.

Установка

npm:

npm i @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge

yarn:

yarn add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge

pnpm:

pnpm add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge

Обратите внимание: мы поддерживаем react и react-dom ^17.0.0 и ^18.1.0

Hello World

import React from 'react';
import ReactDOM from 'react-dom';
import {
  AdaptivityProvider,
  ConfigProvider,
  AppRoot,
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Header,
  Group,
  SimpleCell,
} from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

const Example = () => {
  return (
    <AppRoot>
      <SplitLayout header={<PanelHeader separator={false} />}>
        <SplitCol autoSpaced>
          <View activePanel="main">
            <Panel id="main">
              <PanelHeader>VKUI</PanelHeader>
              <Group header={<Header mode="secondary">Items</Header>}>
                <SimpleCell>Hello</SimpleCell>
                <SimpleCell>World</SimpleCell>
              </Group>
            </Panel>
          </View>
        </SplitCol>
      </SplitLayout>
    </AppRoot>
  );
};

ReactDOM.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <Example />
    </AdaptivityProvider>
  </ConfigProvider>,
  document.getElementById('root'),
);

Браузеры

На данный момент мы поддерживаем WebView следующих операционных систем:

• Android >= 5
• iOS >= 9

Иными словами, мы поддерживаем браузеры следующих версий:

• Safari для iOS >= 9
• Android Browser >= 5 (Chrome 36)
• Chrome для Android, начиная с Android 5.0 (Chrome 36)

Тестирование

Мы работаем над качеством библиотеки и подвозим тесты. yarn test запускает юниты, проверяет типы и линтит. yarn test:unit запускает только юниты и поддерживает интерактивный режим с флагом --watch. Также мы поддерживаем скриншотные тесты — смотрите наш гайд по тестированию.

Документация

В документации вы сможете найти информацию об использовании компонентов и утилит.

Сообщить о проблеме

Напишите нам issue, если нашли баг или у вас есть предложения по улучшению библиотеки. Если вы хотите задать вопрос или обсудить библиотеку, воспользуйтесь дискуссиями.

Contributing

Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в истории:

1. Для начала ознакомьтесь с нашим манифестом 📝
2. Затем посмотрите требования к разработке 🔧
3. А теперь смело вносите изменения и создавайте pull request ❤️