React MUI Hidden Layout

Material-UI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Hidden component in the Material-UI library.

The Hidden Component in React MUI (Material-UI) allows you to conditionally hide or show content based on screen size breakpoints. This can be useful for creating responsive layouts where you want certain content to be visible only on certain devices on screen sizes. 

Syntax:

<Hidden smDown>
    <p>This text will be hidden on small screens.</p>
</Hidden>

Installing React App: 

Step 1: Create a React app using the following command.

npx create-react-app hidden-example

Step 2: Now get into the project directory

cd hidden-example

Installing Material-UI:  Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.

npm install @material-ui/core
OR
yarn add @material-ui/core

Project Structure: It will look like the following.

Project Structure

Importing the Hidden Component: 

import Hidden from '@material-ui/core/Hidden';

Breakpoints: The Breakpoints (props) provide a simple way to conditionally hide content based on breakpoints. 

• xsDown: Hide content on screens that are extra small (mobile) and down.
• xsUp: Hide content on screens that are extra small (mobile) and up.
• smDown: Hide content on screens that are small (tablet) and down.
• smUp: Hide content on screens that are small (tablet) and up.
• mdDown:  Hide content on screens that are medium (small desktop) and down.
• mdUp: Hide content on screens that are medium (small desktop) and up.
• lgDown: Hide content on screens that are large (large desktop) and down.
• lgUp: Hide content on screens that are large (large desktop) and up.
• xlDown: Hide content on screens that are extra large (extra large desktop) and down.
• xlUp: Hide content on screens that are extra large (extra large desktop) and up.
• only: Hide content on all screens except the specified size or sizes.
• implementation: It specifies the CSS implementation used for the component. It is an optional prop that can be used to customize the behavior of the ‘Hidden’ component based on the specific use case. 

Example 1: Write down the following code in the App.js file. Here, the App is our default component where we have written our code.

Javascript

import React from 'react';
import { Hidden } from '@mui/material';

function App() {
    return (
        <div>
            <p>This content is always visible</p>
            <Hidden smUp implementation="css">
                <p>
                    This content is hidden on
                    small screens and up using
                    the CSS visibility property
                </p>
            </Hidden>
        </div>
    )
}

export default App

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

smDown: This value can be used in React to hide the content below a certain screen size. By default, this breakpoint is set to 600 pixels.

Example 2: 

Javascript

import React from 'react';
import { Hidden, Paper } from '@mui/material';

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;

Output: 

Reference: https://mui.com/material-ui/react-hidden/