Change from widthWidth to useWidth on MUI v5 ReactJS

Question

I'm working on a project that uses MUI as UI Library for the React app. Today I started the migration to v5, and I'm facing a problem with all the functional components that were wrapped by withWidth().

The official documentation says something about a new Hook developed under the name useWidth , and I don't know how my function should get the property width from that hook.

My functional component is this one:

import { GridList, Grid } from "@material-ui/core";
import withWidth, { isWidthUp } from "@material-ui/core/withWidth";

import {
  ExtraTile,
  ExtraDiv,
  ExtraDescriptionText,
  ExtraPriceText,
} from "components/Extras/components/ExtraTiles";

import {
  SwitchExtra,
  SwitchExtraImage,
  SwitchTextDiv,
  SwitchDiv,
} from "components/Extras/components/SwitchExtraTiles";

function ExtraSwitchComponent(props) {
  return (
    <GridList
      cellHeight={isWidthUp("md", props.width) ? 100 : 200}
      cols={1}
      spacing={0}
    >
      <ExtraTile
        style={{ cursor: "auto" }}
        key={props.type + "-tile"}
        cols={1}
        component="div"
      >
        <ExtraDiv>
          <Grid
            container
            direction="row"
            justifyContent="space-between"
            style={{ height: "100%" }}
          >
            <Grid
              item
              xs={isWidthUp("md", props.width) ? 4 : 12}
              style={{ height: isWidthUp("md", props.width) ? "100%" : "33%" }}
            >
              <SwitchExtraImage
                src={props.imageUrl}
                alt={props.imageAlt}
                topRight={isWidthUp("md", props.width) ? "0px" : "10px"}
                bottomLeft={isWidthUp("md", props.width) ? "10px" : "0px"}
              />
            </Grid>
            <Grid
              item
              xs={isWidthUp("md", props.width) ? 4 : 12}
              style={{ height: isWidthUp("md", props.width) ? "100%" : "33%" }}
            >
              <Grid
                container
                alignItems="center"
                style={{ height: "100%", width: "100%" }}
              >
                <Grid item xs={12} style={{ width: "100%", height: "50%" }}>
                  <ExtraDescriptionText>
                    {props.description}
                  </ExtraDescriptionText>
                </Grid>
                <Grid item xs={12} style={{ width: "100%", height: "50%" }}>
                  <ExtraPriceText>
                    {"+ " + props.price + props.priceDescriptor}
                  </ExtraPriceText>
                </Grid>
              </Grid>
            </Grid>
            <Grid
              item
              container
              xs={isWidthUp("md", props.width) ? 4 : 12}
              style={{ height: isWidthUp("md", props.width) ? "100%" : "33%" }}
              alignItems="center"
              justify="center"
              direction="column"
            >
              <SwitchExtra
                checked={props.selected}
                onChange={props.setSelected}
                color="primary"
              />
            </Grid>
          </Grid>
        </ExtraDiv>
      </ExtraTile>
    </GridList>
  );
}

export default withWidth()(ExtraSwitchComponent);

Any info on how to face this problem is welcome.

Answer 1

You can also drop useWidth/withWidth usage and use sx prop with responsive values instead:

<Grid
  sx={{
    height: {
      xs: '30%',
      md: '100%',
    }
  }}
/>

EDIT: If you want to conditionally change the props based on the breakpoint:

function useIsWidthUp(breakpoint) {
  const theme = useTheme();
  return useMediaQuery(theme.breakpoints.up(breakpoint));
}
function useIsWidthDown(breakpoint) {
  const theme = useTheme();
  return useMediaQuery(theme.breakpoints.down(breakpoint));
}

function MyComponent() {
  const isMdUp = useIsWidthUp("md");
  const isMdDown = useIsWidthDown("md");

  return (
    <SwitchExtraImage topRight={isMdUp ? "0px" : "10px"} {...} />
  )
}

Live Demo

Answer 2

This lib came in handy for getting the hook I needed https://www.npmjs.com/package/react-use

You can utilize their createBreakpoint hook like so:

import { createBreakpoint } from "react-use";

const useBreakpoint = createBreakpoint({
  xl: 1563,
  lg: 1200,
  md: 900,
  sm: 600,
  xs: 0,
});

const someComponent = ()=>{
const breakpoint = useBreakpoint(); 
let isMobile = breakpoint === "xs";

  return <p>The user is on a mobile device: {isMobile}</p> 
}