-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Way to use media query(javascript) for responsive layout? #2142
Comments
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 |
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
I believe currently gatsby would evaluate someVar statically at build time? |
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. |
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 |
@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? |
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:
|
yep, that will work since the style is inline. |
@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 |
Hey try going through the tutorial if you haven't yet. |
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 :) |
The build is broken, because we can't use <MediaQuery> without giving it a values object, because we're rendering server side. It seems to be needed only once, but maybe we should come up with a more detailed default with other media properties. The Devices.jsx on the dry-media-queries branch seems like a good place. See [the react-responsive-docs](https://github.com/contra/react-responsive#server-rendering) and [this issue](gatsbyjs/gatsby#2142)
* Add mobile navigation * Add Responsive rendering of NavBars * Add CSSTransition to MobileNavBar * Make NavBar fixed to top and make content scroll instead of window * Change MediaQuery and styling of NavBar * Refactor renderfunctions in MobileNavBar * Fix build The build is broken, because we can't use <MediaQuery> without giving it a values object, because we're rendering server side. It seems to be needed only once, but maybe we should come up with a more detailed default with other media properties. The Devices.jsx on the dry-media-queries branch seems like a good place. See [the react-responsive-docs](https://github.com/contra/react-responsive#server-rendering) and [this issue](gatsbyjs/gatsby#2142)
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. |
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?
The text was updated successfully, but these errors were encountered: