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

6.0.1 • Public • Published

license mit open latest version

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

Установка

npm:

npm i @vkontakte/vkui

yarn:

yarn add @vkontakte/vkui

pnpm:

pnpm add @vkontakte/vkui

Обратите внимание: мы поддерживаем react и react-dom версии ^18.2.0

Hello World

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  AdaptivityProvider,
  ConfigProvider,
  AppRoot,
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Header,
  Group,
  SimpleCell,
} from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

const Example = () => {
  const platform = usePlatform();

  return (
    <AppRoot>
      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
        <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>
  );
};

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <Example />
    </AdaptivityProvider>
  </ConfigProvider>,
);

Браузеры

С подробным списком можно ознакомиться в файле .browserslistrc

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

Мы работаем над качеством библиотеки и подвозим тесты. yarn test запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш гайд по тестированию.

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

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

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

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

Contributing

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i @vkontakte/vkui

Weekly Downloads

1,400

Version

6.0.1

License

MIT

Unpacked Size

20.9 MB

Total Files

6311

Last publish

Collaborators

  • vkarelin
  • fedorov.xyz
  • vkcom-publisher