Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the React MUI Grow API. The Grow API helps to add a growing or enlarging transition providing a better interface for the user.
Import Statement:
import Grow from '@mui/material/Grow';
// or
import { Grow } from '@mui/material';
Grow API Props:
- children: It represents the content of the component.
- appear: It is a boolean value. It determines whether to perform the enter transition when it first mounts or not. It is true by default.
- in: It is a boolean value. It determines whether the component will show a transition in or not. It is false by default.
- easing: It is a transition timing function.
- addEndListener: This function allows the addition of a custom transition end trigger.
- timeout: It refers to the duration of the transition. Its default value is auto.
Syntax:
<Grow></Grow>
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 npm install @emotion/react npm install @emotion/styled
Project Structure: It will look like the following.
Example 1: We are creating a state using react hook useState naming show with an initial value set as false. We are adding the Grow Component, which shows an image, and also added a button “SHOW LOGO” with the onClick function that calls the onClickHandler that changes the state.
App.js
Javascript
import { Grow, Button } from '@mui/material'; import React, { useState } from 'react' export default function App() { const [show, setShow] = useState(false) const onClickHandler = () => { setShow(!show); } return ( <div style={{ margin: 30 }}> <h1 style={{ color: "green" }}>neveropen</h1> <h2>React MUI Grow API</h2> <Button variant="outlined" onClick={onClickHandler} color="success">Show Logo</Button> <Grow in={show} > <img src= height={200} width={200} /> </Grow> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Example 2: To the above code, to the Grow component we are further passing the timeout prop set as 5000 and the setting appears to prop as false.
App.js
Javascript
import { Grow, Button } from '@mui/material'; import React, { useState } from 'react' export default function App() { const [show, setShow] = useState(false) const onClickHandler = () => { setShow(!show); } return ( <div style={{ margin: 30 }}> <h1 style={{ color: "green" }}>neveropen</h1> <h2>React MUI Grow API</h2> <Button variant="outlined" onClick={onClickHandler} color="success"> Show Logo </Button> <Grow in={show} appear={false} timeout={5000}> <img src= height={200} width={200} /> </Grow> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Reference: https://mui.com/material-ui/api/grow/
