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

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 запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш гайд по тестированию.

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

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

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

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