ym88659208ym87991671
Пример определения флага mobile | Документация SmartMarket
Skip to main content

Пример определения флага mobile

Для определения флага mobile может использоваться ResizeObserver.

Если этот флаг mobile установлен, чат будет запущен в режиме для мобильных устройств — будет раскрываться на весь экран.

import React, { FC } from 'react';
import { createAssistantClient } from '@sberdevices/assistant-client';
import { FloatingAssistantChat } from '@sberdevices/assistant-web-sdk';

const MOBILE_WIDTH = 560; // ширина экрана с которой начинается mobile верстка

export const ChatWithAssistant: FC = () => {
const [isMobile, setIsMobile] = useState(window.document.documentElement.offsetWidth < MOBILE_WIDTH);

useLayoutEffect(() => {
// Observer для определения isMobile в зависимости от ширины экрана
const element = window.document.documentElement;
const resizeObserver = new window.ResizeObserver((entries: ResizeObserverEntry[]) => {
for (const entry of entries) {
setIsMobile(entry.contentRect.width < MOBILE_WIDTH);
}
});
resizeObserver.observe(element);

return () => {
resizeObserver.unobserve(element);
};
}, []);

return <FloatingAssistantChat {...props} mobile={isMobile} />;
};
Обновлено 20 апреля 2022

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней