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/
