How to Dynamically Change Cols of GridList in React Material-UI

Question

I am following React Material UI design for horizontal single line image grid list with horizontal scroll. How can I change "Cols" value dynamically based on screen size (xm, sm, md, ls)? For example md screen will be "12 cols", sm screen will be "4 cols" etc.

Single line Grid list

https://material-ui.com/demos/grid-list/#single-line-grid-list

  <GridList className={classes.gridList} cols={3}>......</GridList>

Does class.gridList change dynamically on different resolutions? — Marko Savic

Phan Hien Phan Hien · Accepted Answer · 2020-04-11T12:27:54

We could try the layout breakpoint of @material-ui/core/withWidth.

Basically, we register the width change event and based on that calculate to have final cols

Here is my example:

import withWidth, { isWidthUp } from '@material-ui/core/withWidth';

const ExampleComponent = (props) => {

    function getCols(screenWidth) {
      if (isWidthUp('lg', screenWidth)) {
        return 5;
      }

      if (isWidthUp('md', screenWidth)) {
        return 3;
      }

      return 2;
    }

    const cols = getCols(props.width); // width is associated when using withWidth()

    return ( < GridList cols={cols}... > ... </GridList>)
  }
  
export default withWidth()(ExampleComponent)

You can check an api to have more info: https://material-ui.com/customization/breakpoints/

How to Dynamically Change Cols of GridList in React Material-UI

1 Answers