Nonlinear Performance Magnification

    @vkontakte/vkui
    TypeScript icon, indicating that this package has built-in type declarations

    4.35.1 • Public • Published

    VKUI logo

    license mit open latest version

    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

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

    Keywords

    none

    Install

    npm i @vkontakte/vkui

    DownloadsWeekly Downloads

    1,620

    Version

    4.35.1

    License

    MIT

    Unpacked Size

    13 MB

    Total Files

    3743

    Last publish

    Collaborators

    • nekr
    • fedorov.xyz
    • vkcom-publisher
    • thisman