React MUI Grow API

Last Updated : 29 Dec, 2022

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" }}>GeeksforGeeks</h1> 
            <h2>React MUI  Grow API</h2> 
            <Button variant="outlined" 
                onClick={onClickHandler}  
                color="success">Show Logo</Button> 
            <Grow in={show} > 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
                    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" }}>GeeksforGeeks</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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
                    height={200} 
                    width={200} 
                /> 
            </Grow> 
        </div> 
    ); 
}