responsive buttongroup buttons in material ui + reactjs app

How to achieve responsive ButtonGroup Buttons? I found some information that material-ui’s ButtonGroup can use an attribute called “Orientation” but I don’t understand how to use it with media queries which means changing its orientation in real-time when the device has a narrow width etc. I’m new to this so bear with me.

import './App.css';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { deepPurple, purple } from '@material-ui/core/colors';

const dvTheme = createMuiTheme({ palette: { primary: deepPurple } });
const bvTheme = createMuiTheme({ palette: { primary: purple } });

function App() {
    return (

    <div className="App">
          <MuiThemeProvider theme={bvTheme}>
              <div className="App-header">  
                  <h1 id="header-text">Web Programming</h1>
              </div>
          </MuiThemeProvider>
          <MuiThemeProvider theme={dvTheme}>
                <div className="header-buttons">
                    <ButtonGroup variant="contained" size="large" className="btngrp" color="primary">
              <Button>Overview</Button>
              <Button>Features</Button>
              <Button>Details</Button>
              <Button>Technology</Button>
              <Button>FAQ</Button>
                  </ButtonGroup> 
              </div>
            </MuiThemeProvider>
            <Container>       
                <div className="main">
                    <Grid container justify="center">
                       
                        <Grid item id="feature-vid">
                            <video width="300" height="240" controls>
                                </video>
                        </Grid>
                        <Grid item id="feature-paragraph">
                            <h1 id="feature-text">Features</h1>
                            <p>
                                Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
                                </p>
                            <a href="#" id="feature-link">READ OUR FEATURES</a>
                        </Grid>   
                    </Grid>
                </div>
            </Container>

            <Container spacing={0}>
                <Grid container>
                <Grid item>
                    <h2>Details</h2>
                    </Grid>
                </Grid>
            </Container>

    </div>
  );
}
export default App;

Answer

First you need to specify the criteria for mediquery as below:

  const matches = useMediaQuery("(min-width:600px)");

Then change the orientation based on the value of matches:

  orientation={`${matches ? `horizontal` : `vertical`}`}

as you can see in this sandbox link, the orientation of the ButtonGroup is horizontal when the width is higher than 600px and it’s vertical for the lower width values.

You can also read here about the Media queries in Material UI, and here about the ButtonGroup APIs and props.

Advertisement

Answer