react-detect-device

import React, { FC, memo } from "react";
import { text, background, gradient, body1, headline2 } from '@sberdevices/plasma-tokens';
import { sberBox, sberPortal, touch } from '@sberdevices/plasma-tokens/typo';
import styled, { createGlobalStyle } from 'styled-components';
import { detectDevice } from '@sberdevices/ui/utils';

const TypoScaleSberBox = createGlobalStyle(sberBox);
const TypoScaleSberPortal = createGlobalStyle(sberPortal);
const TypoScaleTouch = createGlobalStyle(touch);

const AppStyle = styled.div`
    ${body1}
`;

const DocStyle = createGlobalStyle`
  html {
    color: ${text};
    background-color: ${background};
    background-image: ${gradient};
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  `;

export const App: FC = memo(() => {
  
  return (
    <AppStyle>
      {(() => {
        switch (detectDevice()) {
          case "sberPortal":
            return <TypoScaleSberBox />
          case "sberBox": 
            return <TypoScaleSberPortal />
          case "touch":
            return <TypoScaleTouch />
          default:
            return;
        }
      })()} 
      <DocStyle />
      <h2 style={headline2}>Hello world</h2>
    </AppStyle>
  );
});