React - how to use media queries with Radium

In the last article we explored how we can deal with pseudo-selectors using inline styles and Radium.

Today we're going to see how to make your design responsive using media-queries and Radium. Consider the code below:

We have two super simple functional components, App, which is the main one and DisplaySquare, which displays a red square. Now let's look at the CSS of the div:

const divStyle = {
    height: "400px",
    width: "400px",
    backgroundColor: "red",
    margin: "auto",
    "@media (max-width: 600px)": {
      height: "200px",
      width: "200px",
      backgroundColor: "green",
      margin: "auto"
    }
  };

We stored our styling into a variable that will be passed as a value to the style property of the div. The CSS looks quite normal, except maybe for this part:

"@media (max-width: 600px)": {
      height: "200px",
      width: "200px",
      backgroundColor: "green",
      margin: "auto"
    }

The code says that when the view-port is smaller than 601px, the div should be smaller and green. And this is how we work with media-queries in Radium. The complete code is here and I recommend you playing around with it.

Besides importing Radium we also need to import the {StyleRoot} HOC (higher order component) because our App component needs to be wrapped in it (media queries won't work if we don't do this). Also, as mentioned in the last article, don't forget to wrap all the components that use radium styling in the Radium HOC, when exporting them.

Radium is now under stable maintenance so this means no new features will be implemented and even the creators are recommending using alternative tools for achieving the same effects.

You can read more about the project here.

Image source: Zan/ @zanilic on Unsplash