godfreyd/VKUI

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.

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

Установка

npm i @vkontakte/vkui или yarn add @vkontakte/vkui

Важно: Нужно установить вручную peerDependencies, либо использовать npm7+ который делает это автоматически.

Hello World

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

const Example = () => {
  const { viewWidth } = useAdaptivity();
  
  return (
    <AppRoot>
      <SplitLayout header={<PanelHeader separator={false} />}>
        <SplitCol spaced={viewWidth > ViewWidth.MOBILE}>
          <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 >= 4.4
• iOS >= 9

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

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

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

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

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

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

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

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

Contributing

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