---
id: Start

title: Старт
description: Библиотека общих React-компонентов.
---

# @yandex-lego/components · ![package version](https://badger.yandex-team.ru/npm/@yandex-lego/components/version.svg)

Библиотека общих React-компонентов.

Если у вас возникли проблемы или вопросы, напишите нам в [SupportBoard](https://supportboard.yandex-team.ru/LEGOSUPPORT/add-question).

## Установка

Вы можете установить пакет `@yandex-lego/components` с помощью `npm`, как показано ниже:

```bash
#⠀пакет с компонентами
npm i -P @yandex-lego/components --registry http://npm.yandex-team.ru
#⠀peer зависимости
npm i -P @bem-react/core @bem-react/di @bem-react/classname
```

## Использование

1. Подключите тему:

  ```ts
  // src/App.js
  import { configureRootTheme } from '@yandex-lego/components/Theme'
  import { theme } from '@yandex-lego/components/Theme/presets/default'

  // Без указания root, по умолчанию body
  configureRootTheme({ theme })
  ```

  Если на проекте есть SSR, то тему необходимо конфигурировать на сервере:

  ```ts
  // src/App.js
  import { cnTheme } from '@yandex-lego/components/Theme'
  import { theme } from '@yandex-lego/components/Theme/presets/default'

  export const App = () => (
    <div className={cnTheme(theme)}>
      ...
    </div>
  )
  ```

2. Выберите сборку для использования:

  Бандл компонента со всеми модификаторами:

  ```ts
  import React from 'react'
  import { Button } from '@yandex-lego/components/Button/desktop/bundle'

  export const App = () => (
    <Button view="default" size="m">
      Button
    </Button>
  )
  ```

  Точечное подключение необходимых модификаторов:

  ```ts
  import React from 'react'
  import { compose, composeU } from '@bem-react/core'
  import { Button as ButtonDesktop, withSizeM, withViewDefault, withViewAction } from '@yandex-lego/components/Button/desktop'

  const Button = compose(
    withSizeM,
    composeU(withViewDefault, withViewAction)
  )(ButtonDesktop)

  export const App = () => (
    <Button view="default" size="m">
      Button
    </Button>
  )
  ```

<details markdown="1">

<summary>Поддержка тем в IE11</summary>

Для поддержки тем в IE11 необходимо использовать [postcss-theme-fold](https://github.com/yarastqt/postcss-theme-fold) плагин, для того, чтобы раскрывать CSS-переменные в соответствии с темами.

**Установка:**

```bash
npm i -D postcss-theme-fold
```

**Использование:**

```js
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-theme-fold')({
      // Подключаем необходимый набор тем.
      themes: [
        [require.resolve('@yandex-lego/components/Theme/presets/default.css')],
      ],
      // Объявляем массив классов-хелперов.
      globalSelectors: ['.utilityfocus'],
    }),
  ],
}
```

</details>

<br />

## Next.js 

Для использования библиотеки внутри Next.js приложения воспользуйтесь плагином <a href="https://github.com/bem/next-global-css" target="_blank">next-global-css</a>.

```bash
npm i -PE next-global-css
```

```js
const { withGlobalCss } = require('next-global-css')

const withConfig = withGlobalCss()

module.exports = withConfig({
  /* Next.js config options here */
})
```

> Плагин работает с версией Next.js >= 10.


## Поддерживаемые платформы

Мы поддерживаем стабильные версии всех основных браузеров, в том числе и IE11.

| Browser           | Поддерживаемая версия |
| ----------------- | --------------------- |
| Chrome            | Последние 2 версии    |
| Opera             | >= 12.1               |
| Firefox           | >= 23                 |
| Android           | >= 4                  |
| iOS Safari        | >= 5.1                |
| Internet Explorer &#42; | >= 11                 |

&#42; — требуется установка <a href="https://github.com/yarastqt/postcss-theme-fold" target="_blank">postcss-theme-fold</a> плагина.