jeka1985/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.