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/
