Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vkcom/vkui
VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
https://github.com/vkcom/vkui
javascript mobile-web opensource postcss reactjs typescript ui uikit vkontakte vkui
Last synced: about 15 hours ago
JSON representation
VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
- Host: GitHub
- URL: https://github.com/vkcom/vkui
- Owner: VKCOM
- License: mit
- Created: 2017-01-16T12:09:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T12:49:31.000Z (6 months ago)
- Last Synced: 2024-04-14T04:06:52.192Z (5 months ago)
- Topics: javascript, mobile-web, opensource, postcss, reactjs, typescript, ui, uikit, vkontakte, vkui
- Language: TypeScript
- Homepage: https://vkcom.github.io/VKUI/
- Size: 932 MB
- Stars: 957
- Watchers: 33
- Forks: 180
- Open Issues: 276
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
VKUI — это библиотека адаптивных React-компонентов
для создания веб-приложений.
Библиотека основана на дизайн-системе VK и реализует её интерфейсы для различных платформ.
Релизы: https://github.com/VKCOM/VKUI/releases.
Гайд по миграции на версию 6.
## Установка
**npm:**
```sh
npm i @vkontakte/vkui
```
**yarn:**
```sh
yarn add @vkontakte/vkui
```
**pnpm:**
```sh
pnpm add @vkontakte/vkui
```
> _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) версии `^18.2.0`
## Hello World
```jsx static
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 (
}>
VKUI
Items}>
Hello
World
);
};
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
,
);
```
## Браузеры
С подробным списком можно ознакомиться в файле [.browserslistrc](https://github.com/VKCOM/VKUI/blob/master/.browserslistrc)
## Тестирование
Мы работаем над качеством библиотеки и подвозим тесты. `yarn test` запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш [гайд по тестированию](https://github.com/VKCOM/VKUI/blob/master/docs/TESTING.md).
## Документация
В [документации](https://vkcom.github.io/VKUI/) вы сможете найти информацию об использовании компонентов и утилит.
## Сообщить о проблеме
Напишите нам [issue](https://github.com/VKCOM/VKUI/issues/new/choose), если нашли баг или у вас есть предложения по улучшению библиотеки. Если вы хотите задать вопрос или обсудить библиотеку, воспользуйтесь [дискуссиями](https://github.com/VKCOM/VKUI/discussions/categories/q-a).
## Contributing
Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в истории:
1. Для начала ознакомьтесь с нашим [манифестом](https://github.com/VKCOM/VKUI/blob/master/docs/MANIFESTO.md) 📝
2. Затем посмотрите [требования к разработке](https://github.com/VKCOM/VKUI/blob/master/docs/CONTRIBUTING.md) 🔧
3. А теперь смело вносите изменения и создавайте [pull request](https://github.com/VKCOM/VKUI/pulls) ❤️