React MUI or 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 Fade API. The Fade API helps to show a fading transition effect.
Import Statement:
import Fade from '@mui/material/Fade';
// or
import { Fade } from '@mui/material';
Fade 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 that 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.
Syntax:
<Fade></Fade>
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 Fade 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 { Fade, 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 Fade API</h2> <Button variant="outlined" onClick={onClickHandler} color="success">Show Logo</Button> <Fade in={show} > <img src= height={200} width={200} /> </Fade> </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 Fade component we are further passing the timeout prop set as 1200 and setting appear prop as false.
App.js
Javascript
import { Fade, 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 Fade API</h2> <Button variant="outlined" onClick={onClickHandler} color="success">Show Logo</Button> <Fade in={show} appear='false' timeout={1200}> <img src= height={200} width={200} /> </Fade> </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/fade/
