Определение устройства

Типичный смартапп может работать в двух режимах (размерах) типографики – deviceScale = 1 и deviceScale = 2. Для этого необходимо определение устройства, на котором будет работать приложение. Для решения этой задачи используется компонент DeviceThemeProvider.

Подключите компонент в корне приложения, чтобы дать всем компонентам Plasma далее по дереву DOM доступ к объекту темы, через который передается значение deviceScale.

Пример

index.tsx

import ReactDOM from 'react-dom';// Стандартная функция определения поверхности на основе userAgentimport { DeviceThemeProvider, detectDevice } from '@salutejs/plasma-ui';
import { App } from './App';
// Если стилизованным компонентам необходимо передать свой объект темыconst myFancyTheme = {    brandColor: '#BADA55',};
// Получение типа устройства, например, через environment variableconst deviceKind = process.env.DEVICE;
// Если стандартная функция определения поверхности не подходит, можно передать своюconst detectDeviceCallback = () => deviceKind;
ReactDOM.render(    <DeviceThemeProvider theme={myFancyTheme} detectDeviceCallback={detectDeviceCallback}>        <App />    </DeviceThemeProvider>,    document.getElementById('root'),);