React MUI Transitions Util

import React, { useState } from 'react';
import { Box, Collapse, Fade, Button } from '@mui/material';

const Transition = () => {
    const [fade, setFade] = useState(false);
    const [collapse, setCollapse] = useState(false);
    const logo =
'https://media.geeksforgeeks.org/wp-content/uploads/20230104121959/logo.jpg';
    const handleFade = () => {
        setFade((fade) => !fade);
    }

    const handleCollapse = () => {
        setCollapse((collapse) => !collapse);
    }

    return (
        <Box sx={{
            boxShadow: 2, margin: '20px', height: '300px',
            display: 'flex', width: '425px',
            justifyContent: 'center'
        }}>
            <div style={{
                display: 'flex',
                flexDirection: 'column', alignItems: 'center'
            }}>
                <Fade in={fade}>
                    <img src={logo} alt='' width='200px'
                        height='200px' />
                </Fade>
                <Button variant='contained' color='error'
                    sx={{ width: '150px', alignItems: 'center' }}
                    onClick={handleFade}>fade Me</Button>
            </div>
            <div style={{
                display: 'flex', flexDirection: 'column',
                alignItems: 'center'
            }}>
                <Collapse in={collapse}>
                    <img src={logo} alt='' width='200px'
                        height='200px' />
                </Collapse>
                <Button variant='contained'
                    color='error' sx={{
                        width: '150px',
                        position: 'fixed', marginTop: '200px'
                    }}
                    onClick={handleCollapse}>Collapse Me</Button>
            </div>
        </Box>
    );
}

export default Transition;

import React, { useState } from 'react';
import { Box, Grow, Slide, Zoom, Button } from '@mui/material';

const Transition = () => {
    const [grow, setGrow] = useState(false);
    const [slide, setSlide] = useState(false);
    const [zoom, setZoom] = useState(false);
    const logo =
'https://media.geeksforgeeks.org/wp-content/uploads/20230104121959/logo.jpg';
    const handleGrow = () => {
        setGrow((grow) => !grow);
    }

    const handleSlide = () => {
        setSlide((slide) => !slide);
    }

    const handleZoom = () => {
        setZoom((zoom) => !zoom);
    }

    return (
        <Box sx={{ boxShadow: 2, margin: '20px', height: '300px', 
            display: 'flex', width: '700px', 
            justifyContent: 'center' }}>
            <div style={{ display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center' }}>
                <Grow in={grow}>
                    <img src={logo} alt='' width='200px' 
                        height='200px' />
                </Grow>
                <Button variant='contained' color='error' 
                    sx={{ width: '150px', alignItems: 'center' }} 
                    onClick={handleGrow}>grow Me</Button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', 
                alignItems: 'center' }}>
                <Slide in={slide}>
                    <img src={logo} alt='' 
                        width='200px' height='200px' />
                </Slide>
                <Button variant='contained' color='error' 
                    sx={{ width: '150px', position: 'fixed', 
                    marginTop: '200px' }} 
                    onClick={handleSlide}>slide Me</Button>
            </div>
            <div style={{ display: 'flex', 
                flexDirection: 'column', alignItems: 'center' }}>
                <Zoom in={zoom}>
                    <img src={logo} alt='' 
                        width='200px' height='200px' />
                </Zoom>
                <Button variant='contained' color='error' 
                    sx={{ width: '150px', position: 'fixed', 
                    marginTop: '200px' }} onClick={handleZoom}>
                        Zoom Me
                </Button>
            </div>
        </Box>
    );
}

export default Transition;