heyqbnk/VKUI

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

VKUI — это библиотека адаптивных React-компонентов,
для создания веб-приложений и VK Mini Apps в экосистеме ВКонтакте.
Библиотека основана на дизайн-системе ВКонтакте и реализует её интерфейсы для различных платформ.

Установка

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

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

Hello World

import React from 'react';
import ReactDOM from 'react-dom';
import { View, Panel, PanelHeader, Header, Group, Cell } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

function App () {
  return (
    <View activePanel="main">
      <Panel id="main">
        <PanelHeader>VKUI</PanelHeader>
        <Group header={<Header mode="secondary">Items</Header>}>
          <Cell>Hello</Cell>
          <Cell>World</Cell>
        </Group>
      </Panel>
    </View>
  );
}

ReactDOM.render(<App />, 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.