React MUI Zoom

In this article, we will learn about the Zoom API provided by MUI. Material UI is an open-source design framework that showcases different components made in react. It is developed and maintained by Google since 2014.

The Zoom API, provided by MUI, gives a nice smooth transition effect that can be used for the floating variant of the Button component. It uses react-transition-group internally.

Zoom API props:

• children: It denotes a single child content element in the form of a ref
• addEndListener: It denotes a custom transitioning callback function that gets triggered with the transitioning DOM node
• appear: If in is true, it performs the enter transition
• easing: It denotes the transition timing function
• in: It determines whether the component will transition in
• timeout: It denotes the duration of the transition in milliseconds.

nbsp;

Creating React Application And Installing Module

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure: The project should look like the below:

Example 1: Now, let’s create a simple application that utilizes Zoom API by giving us a zoom transition at the click of a toggle. Change your App.js like below:

App.js

import * as React from 'react';
import Box from '@mui/material/Box';
import { FormControlLabel, Paper, Switch, Zoom } from '@mui/material';

const icon = (
    <Paper sx={{ m: 1 }} elevation={4}>
        <Box component="svg" sx={{ width: 100, height: 100 }}>
            <Box
                component="polygon"
                sx={{
                    fill: 'black',
                    stroke: (theme) => theme.palette.divider,
                    strokeWidth: 1,
                }}
                points="0,100 50,00, 100,100"
            />
        </Box>
    </Paper>
);

export default function App() {
    const [checked, setChecked] = React.useState(false);

    const handleChange = () => {
        setChecked((prev) => !prev);
    };

    return (
        <div style={{ width: '100%' }}>
            <FormControlLabel
                control={<Switch checked={checked}
                    onChange={handleChange} />}
                label="Show"
            />
            <Box sx={{ display: 'flex' }}>
                <Zoom in={checked}>{icon}</Zoom>
            </Box>
        </div>
    );
}

Steps to run the application:

npm start

Output:

Example 2: Now, let’s give the zoom transition a timer of 500ms.

App.js

import * as React from 'react';
import Box from '@mui/material/Box';
import { FormControlLabel, Paper, Switch, Zoom } from '@mui/material';

const icon = (
    <Paper sx={{ m: 1 }} elevation={4}>
        <Box component="svg" sx={{ width: 100, height: 100 }}>
            <Box
                component="polygon"
                sx={{
                    fill: 'black',
                    stroke: (theme) => theme.palette.divider,
                    strokeWidth: 1,
                }}
                points="0,100 50,00, 100,100"
            />
        </Box>
    </Paper>
);

export default function App() {
    const [checked, setChecked] = React.useState(false);

    const handleChange = () => {
        setChecked((prev) => !prev);
    };

    return (
        <div style={{ width: '100%' }}>
            <FormControlLabel
                control={<Switch checked={checked}
                         onChange={handleChange} />}
                label="Show"
            />
            <Box sx={{ display: 'flex' }}>
                <Zoom in={checked}
                      style={{ transitionDelay: checked ?
                          '500ms' : '0ms' }}>
                    {icon}
                </Zoom>
            </Box>
        </div>
    );
}

Steps to run the application:

npm start

Output:

Reference: https://mui.com/material-ui/api/zoom/