React-snap: Any way to support multiple viewports?

[mattishii]

I was wondering how I might use react-snap with multiple viewports. I was hoping I could use react-responsive to conditionally render different components based on the width of the viewport, but that doesnt play nice with react-snap/puppeteer. Any ideas on how to resolve that? I could just do css restyling on media queries, I know, but a mobile navbar looks and acts pretty different from a desktop nav.

[stereobooster]

I was hoping I could use react-responsive to conditionally render different components based on the width of the viewport, but that doesnt play nice with react-snap/puppeteer

Can you be more specific? puppeteer is the real browser, I do not know why react-responsive would not work.

I was wondering how I might use react-snap with multiple viewports

Not sure what do you want to get. There can be only one page on the server (per each route) if we are talking about static website. react-snap by default uses mobile size viewport, to change it use

"reactSnap": {
  "viewport": {
    "width": 480,
    "height": 850
  }
}

[mattishii]

React-responsive only renders elements when they match the media query, so if puppeteer rendered a mobile viewport, react-responsive would render desktop elements as null. I guess theres no way to make it work then.

[stereobooster]

Use css media queries - this is always better. Or generate content for mobile - mobile first approach (not sure how rehydration will work in this case)