ReactJS - proper way to handle a responsive design approach?

Question

I've always used CSS and media queries when it comes to responsive design. I've been developing in ReactJS for a while, but I feel my approach to responsive design is sloppy. I find myself using a mix of CSS and Javascript, depending on the situation, to determine the screen size of the user.

I'd prefer to solely use CSS (SCSS to be specific), but this would mean using a lot of display: none when I don't want a particular element to appear for a particular screen size.

For example, I have an app with a navigation drawer on the left side. When the drawer is open, there is a button inside the drawer, but I only want the button to be displayed inside the drawer on large screen devices. On mobile devices, I want to display the button as a floating-action button at the bottom-right corner of the screen. Therefore, I don't want to render the button in the drawer for mobile devices.

My approach to this example would be like so:

render() {
    const maxMobileWidth = 1024;
    return (
        <div className="Drawer">
            {
                // don't show button on mobile devices
                (window.innerWidth >= maxMobileWidth)
                ? <MyButton />
                : null
            }
        </div>
    );
}

(and for mobile devices, I'd render the button in another component, using the same method to determine the screen size to make sure it doesn't render for large screens).

This is nice, because it won't add anything to the DOM on mobile devices, so no need to hide it with display: none on mobile.

What I don't like is that I also have that value 1024 hardcoded in my SCSS files for media queries. I suppose its not that big of a deal, as in my app I actually store the 'maxMobileWidth' in a separate file that can be used by any component, so there are only two places to keep track of this number (the other of course being the SCSS file). But this obviously violates the DRY principle, so I'm wondering if there is a better design approach to this situation?

Answer 1

You could use an approach that builds CSS from JavaScript code. That would let you define constants like maxMobileWidth in your JS files, and use them in both the CSS and JS.

One example (although there are lots of others) is JSS. This is used extensively in the Material-UI React framework, so there are lots of code examples there. Here's one:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import green from '@material-ui/core/colors/green';

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [theme.breakpoints.down('sm')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

function MediaQuery(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <Typography variant="subheading">{'down(sm): red'}</Typography>
      <Typography variant="subheading">{'up(md): blue'}</Typography>
      <Typography variant="subheading">{'up(lg): green'}</Typography>
    </div>
  );
}

MediaQuery.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MediaQuery);