Gatsby: Way to use media query(javascript) for responsive layout?

[thisiscam]

Hi,

I have been building a responsive static site(e.g. render differently when browser resizes). Now I know that it probably doesn't fill gatsby's paradigm? But would it be possible to blend certain client side javascript code in gatsby pages or layouts?

Specifically, just as an example, is there a way to use https://github.com/contra/react-responsive on client side?

[pierrenel]

Short answer: yes

In your templates / components, just include your .scss file (I have one per component / template) - which would contain the media queries and things will work as usual. There are a zillion ways to do it, whatever works for you.

P

[thisiscam]

Sorry the title is kind of a misnomer, I was sort of asking if it will be possible to use dynamic inline styles that kind of thing? For example, what if I have

render() { 
    const someVar = /*read some element's size dynamically, via media query in javascript*/ 
    return <div style={{height: someVar}}>
}

I believe currently gatsby would evaluate someVar statically at build time?

[KyleAMathews]

Yeah you should generally use CSS for media queries since when we render on the server, we don't know what kind of device will be viewing the page. If you do responsive stuff in JavaScript then your page will jump around often when you load because it'll look one way on the initial load and then when JS loads, it'll re-render based on the media query there.

[thisiscam]

If it helps, my end goals are to integrate react-sizeme, react-responsive, and react-motion into my gatsby site. All these libraries seems to break the static build

[thisiscam]

@KyleAMathews Thanks for your comment. I do understand this implication...

However, for example in react-motion, the javascript is purely used to give a fancier animation effect. I think currently even if I set up the time bounds for react-motion's transition animation statically, it will not be evaluated on client side?

So yeah, I think the main question here is: how I can hybrid dynamic react components with gatsby?

[thisiscam]

Sorry for flooding this thread. But a very nice problem to solve would be "show/hide content on clicking a button".

Personally I think this kind of behavior to be still within the category of static websites? Is it something that can be achieved easily? I'm looking for something like this:

<p 
  onClick={() => this.setState({enabled: false})} 
  style= {{visibility: this.state.enabled ? "default" : "hidden"}}
>
  Click to hide
</p>

[pierrenel]

yep, that will work since the style is inline.

[thisiscam]

@pierrenel I just tried and it didn't work after "npm run build". The style={{...}} is evaluated statically during server build, and onClick is basically ignored in the generated html

[KyleAMathews]

Hey try going through the tutorial if you haven't yet.

[thisiscam]

Ha, I did went through the tutorial and I never thought I have to use some static hosing service to test it out.. I was kind of thinking that the index.html would have automatically included all the javascripts.

Closing this issue since it's super dope :)

[salientknight]

KyleAMathews — I don't find your answer about using CSS media in keeping with the spirit of react — I've patterned all of my code using in-line styles and little or no CSS. Switching to use CSS media tags would mean doing a rewrite the entire layout and layout components in CSS. For those of us excited at the idea of not dealing with CSS and all the cascading headaches that comes with it, this answer gives me pause — much to late in our build however :/

Luckily react-media seems to work.