Reactjs Material-UI Hidden component

Material UI Hidden component:

By default all components are visible. Material UI Hidden component is used to change the visibility of any other component. We can use this component to hide a component even on different breakpoints.

For example, if you have one sidebar that you want to hide on small screen devices, you can use this component with breakpoints.

In this post, I will show you how we can use Hidden component with an example.

Video:

You can also watch the below video to learn on Hidden:

Breakpoint up and down:

We can use up or down property with a specific breakpoint for Hidden. For example, if we use xlUp, it will be hidden for all screen sizes at breakpoints xl and above.

If we use xlDown, it will be hidden for all screen sizes at breakpoints xl and below.

e.g.

<Hidden smDown>
...
</Hidden>

<Hidden smUp>
....
</Hidden>

Breakpoint only:

We can use only property to hide the children at one or multiple breakpoints:

<Hidden only={['lg', 'xl']}>
....
</Hidden>

or

<Hidden only="lg">

React project:

Let's take a look at the below component:

import { Hidden, Paper } from "@material-ui/core";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Hidden smDown>
        <Paper style={{ backgroundColor: "red", width: 200, height: 200 }} />
      </Hidden>
      <Hidden mdUp>
        <Paper style={{ backgroundColor: "blue", width: 200, height: 200 }} />
      </Hidden>
      <Hidden only="md">
        <Paper style={{ backgroundColor: "green", width: 200, height: 200 }} />
      </Hidden>
    </div>
  );
}

export default App;

• It has three Paper components wrapped with Hidden.
• Each Paper component is wrapped in Hidden with different properties.
• If you run it, the red paper will be hidden for sm and lower screens, blue paper will be hidden for md and above, green paper will be hidden for md.