Build a simple component to handle media queries in ReactJS — Boyney

Build a simple component to handle media queries in #ReactJS:

  • The component behaves as a wrapper component for child components.
  • Using media queries and a wrapper component to handle media queries in ReactJS
  • So I explored using CSS and Wrapper Components to do something similar.
  • Now lets use our component in action.
  • You can add any media query you like, just make sure you match the class name up to your propTypes in your MediaQuery component.

I have been exploring a quick and easy way to add Media queries in React using styles and a simple wrapper component. Together we will quickly explore and create a simple to use MediaQuery component.

@ReactiveConf: Build a simple component to handle media queries in #ReactJS:

I have been exploring a quick and easy way to add Media queries in React using styles and a simple wrapper component.

I looked a solutions online, but did not want to implement a JavaScript solution. If your interested in pure JavaScript solutions check out these projects:

The problem I found with these solutions were the lack of browser support. So I explored using CSS and Wrapper Components to do something similar.

The solution is quite simple and might be helpful if you are exploring media queries and React.

So lets dive in, first we need to create a component.

This component behaves as a wrapper component for child components.

as long as you write the matching class names in your css (we will see more of this later).

class name.

Now all we have to do is write some css to match the class names. So lets take a look at that.

This part is initially up to you.

component.

component.

Now lets use our component in action.

That’s all have to do.

The header ‘Mobile View’ will get rendered on mobile.

The header ‘Desktop View’ will get rendered on desktop.

This was just a quick experiment I come up with when exploring Media queries in React. I haven’t created a demo as its super easy to copy this code and try it out for yourself.

You can checkout the whole gist below.

If you have any questions just tweet me, or leave a comment.

Build a simple component to handle media queries in ReactJS — Boyney