How to Use Material UI Card Complex Interaction?

Last Updated : 25 Jul, 2024

Material-UI (MUI) is a React UI library, built upon Google's Material Design, providing robust and customizable components for streamlined web development. This article delves into Material UI Card Complex Interaction, highlighting the Card component's effectiveness in presenting focused content within a defined rectangular box.

Prerequisites:

Approach:

State Management:
- The component uses the useState hook to manage a state variable named expanded, initialized to false.
- This state tracks whether additional content in the card is expanded or collapsed.
Custom Styling with Material-UI:
- The code utilizes Material-UI's styled utility to create a custom-styled IconButton named ExpandMore.
- The styling includes a rotation animation for the button icon based on the expand prop.
Expand/Collapse Functionality:
- The handleExpandClick function toggles the value of expanded when the user clicks the "Expand more" button.
- This function is triggered by the button's onClick event.
Conditional Rendering with Collapse Component:
- The card content inside the Collapse component is conditionally rendered based on the value of expanded.
- When expanded is true, additional details about the course are displayed; otherwise, the content is collapsed.

Steps for Creating React Application And Installing Module:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/lab

Step 4: Run the project as follows:

npm start

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example 1: In this example, We will design a UI that shows Card Component Complex Interaction.

JavaScript

import * as React from "react";
import {
    Button,
    Card,
    CardMedia,
    CardActions,
    CardContent,
} from "@mui/material";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import Collapse from "@mui/material/Collapse";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const ExpandMore = styled((props) => {
    const { expand, ...other } = props;
    return <IconButton {...other} />;
})(({ theme, expand }) => ({
    transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
        duration: theme.transitions.duration.shortest,
    }),
}));

export default function Demo() {
    const [expanded, setExpanded] = React.useState(false);

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <Card raised={true} sx={{ maxWidth: 1500 }}>
                <CardMedia
                    component="img"
                    height="300"
                    image=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png?v=19333"
                    alt="GFG Logo"
                />
                <CardContent sx={{ bgcolor: "#E8E8E8" }}>
                    <h3>DSA Self Paced Course</h3>
                    <h4 style={{ color: "green" }}>
                        Most popular course on DSA trusted by over 75,000
                        students! Built with years of experience by industry
                        experts and gives you a complete package of video
                        lectures, practice problems, quizzes, discussion forums
                        and contests.
                        <br />
                        Start Today !
                    </h4>
                </CardContent>
                <CardActions>
                    <Button variant="contained" color="warning">
                        Share
                    </Button>
                    <Button variant="contained" color="success">
                        Enroll
                    </Button>

                    <Button variant="contained" color="success">
                        Expand more
                        <ExpandMore
                            expand={expanded}
                            onClick={handleExpandClick}
                            aria-expanded={expanded}
                            aria-label="show more"
                        >
                            <ExpandMoreIcon />
                        </ExpandMore>
                    </Button>
                </CardActions>
                <Collapse in={expanded} timeout="auto" unmountOnExit>
                    <CardContent>
                        <Typography paragraph>
                            This course does not require any prior knowledge of
                            Data Structure and Algorithms and it covers all
                            topics in two languages: C++ and Java. You will also
                            learn algorithmic techniques for solving various
                            problems, get to learn important topics for
                            interviews and get fluent in the basics of
                            programming. You will master all the important
                            topics of data structures and algorithms like
                            sorting, strings, heaps, DP, searching, trees and
                            more and even learn this concepts by practicing on
                            real-world projects. If you have any more queries
                            you can write to us at courses@geeksforgeeks.org
                        </Typography>
                    </CardContent>
                </Collapse>
            </Card>
        </div>
    );
}

Output:

Example 2: In this example, we will see one more UI on the card's complex layout.

JavaScript

import * as React from 'react';
import {
    Button, Card,
    CardActions, CardContent
} from '@mui/material';
import { styled }
    from '@mui/material/styles';
import Typography
    from '@mui/material/Typography';
import IconButton
    from '@mui/material/IconButton';
import Collapse
    from '@mui/material/Collapse';
import ExpandMoreIcon
    from '@mui/icons-material/ExpandMore';

const ExpandMore = styled((props) => {
    const { expand, ...other } = props;
    return < IconButton {...other} />

})(({ theme, expand }) => ({
    transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
        duration: theme.transitions.duration.shortest,
    }),
}));
export default function Demo() {
    const [expanded, setExpanded] =
        React.useState(false);

    const handleExpandClick = () => {
        setExpanded(!expanded)
    };

    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks</h1>
            <h3>
                <u>Welcome Geeks</u>
            </h3>
            <Card raised={true}
                sx={{ bgcolor: "#E8E8E8" }} >
                <CardContent>
                    <h1>Welcome Page</h1>
                    <h3>Learn Self Paced Course and
                        get a high paying job!!
                    </h3>
                </CardContent>
                <CardActions >
                    <Button variant="outlined"
                        color="error">
                        Cancel
                    </Button>
                    <Button variant="contained"
                        color="success">
                        Want to Know more
                        <ExpandMore
                            expand={expanded}
                            onClick={handleExpandClick}
                            aria-expanded={expanded}
                            aria-label="show more"
                        >
                            <ExpandMoreIcon />
                        </ExpandMore>
                    </Button>
                </CardActions>
                <Collapse in={expanded} timeout="auto"
                    unmountOnExit>
                    <CardContent>
                        <Typography paragraph>
                            This course does not require
                            any prior knowledge of Data
                            Structure and Algorithms and it covers
                            all topics in two languages: C++ and Java.
                            You will also learn algorithmic techniques for
                            solving various problems, get to learn important
                            topics for interviews and get fluent in the
                            basics of programming. You will master all the
                            important topics of data structures and algorithms
                            like sorting, strings, heaps, DP, searching, trees
                            and more and even learn this concepts by practicing
                            on real-world projects. If you have any more
                            queries you can write to us at
                            courses@geeksforgeeks.org
                        </Typography>
                    </CardContent>
                </Collapse>
            </Card>
        </div>
    );
}