Переключение макетов в зависимости от размера экрана в Гэтсби

Question

Я создаю веб-приложение с использованием Gatsby, которому необходимо загружать отдельный макет, созданный с помощью библиотеки мобильного интерфейса в мобильном браузере, и другой макет с другой библиотекой интерфейса при открытии в браузере рабочего стола.

Как мне добиться этого на уровне корневого компонента (приложения)?

Спасибо

Answer 1

Я думаю, что вы можете поэкспериментировать с wrapPageElement в gatsby-browser.js и gatsby-ssr.js, возвращая другой макет в зависимости от высоты браузера:

const React = require("react")
const Layout = ...
const MobileLayout = ...

exports.wrapPageElement = ({ element, props }) => {

   // a made up hook to detect browser size, implement your own
   const isMobile = useDetectMobile()

  return (
    isMobile 
      ? <MobileLayout {...props}>{element}</MobileLayout> 
      : <Layout {...props}>{element}</Layout>

  )
}

Это сложно, потому чтово время генерации на стороне сервера вам потребуется макет по умолчанию, который может (или не может?) привести к неправильному поведению?Я не уверен.

Безопасная ставка - создать мобильную версию и версию для ПК для своего приложения, затем определить размер / тип браузера в gatsby-browser и соответственно перенаправить.