React-Bootstrap Fade and Collapse Component
Last Updated :
07 Mar, 2024
React-Bootstrap is a front-end framework that was designed keeping react in mind. Fade Component provides a way to add a fade animation to a child component or an element. Collapse Component provides a way to add a collapse toggle animation to a component or an element We can use the following approach in ReactJS to use the react-bootstrap Fade and Collapse Component.
Fade Props:
- appear: When the component mounts, it is used to run the fade-in animation.
- in: It is used to show the component.
- mountOnEnter: It is used to mount the component as it waits until the first enter transition is triggered.
- onEnter: It is a callback function that is triggered before the component fades in.
- onEntered: It is a callback function that is triggered after the has component faded in.
- onEntering: It is a callback function that is triggered after the component starts to fade in.
- onExit: It is a callback function that is triggered before the component fades out.
- onExited: It is a callback function that is triggered after the component has faded out.
- onExiting: It is a callback function that is triggered after the component starts to fade out.
- timeout: It is used to denote the duration of fade animation in milliseconds.
- unmountOnExit: It is used to unmount the component.
Collapse Props:
- appear: When the component mounts, it is used to run the expand animation.
- children: It is used to define the children element for this component.
- className: It is used to add a class name for the styling of this component.
- dimension: It denotes the dimension in the form of height and width.
- getDimensionValue: It is a function that returns the width or height of animating DOM node.
- in: It is used to show the component.
- mountOnEnter: It is used to mount the component as it waits until the first enter transition is triggered.
- onEnter: It is a callback function that is triggered before the component expands.
- onEntered: It is a callback function that is triggered after the component has expanded.
- onEntering: It is a callback function that is triggered after the component starts to expand.
- onExit: It is a callback function that is triggered before the component collapses.
- onExited: It is a callback function that is triggered after the component has collapsed.
- onExiting: It is a callback function that is triggered after the component starts to collapse.
- role: It is used to define the ARIA role of collapsible element.
- timeout: It is used to denote the duration of collapse animation in milliseconds.
- unmountOnExit: It is used to unmount the component.
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. folder name, 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 react-bootstrap
npm install bootstrap
Project Structure: It will look like the following.
Project Structure
Fade Component Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Filename: App.js
Javascript
import React, { useState } from 'react' ;
import 'bootstrap/dist/css/bootstrap.css' ;
import Button from 'react-bootstrap/Button'
import Fade from 'react-bootstrap/Fade'
export default function App() {
const [open, setOpen] = useState( false );
return (
<div style={{ display: 'block' ,
width: 700, padding: 30 }}>
<h4>React-Bootstrap Fade Component</h4>
<div style={{ width: 660, height: 'auto' }}>
<Button
variant= "link"
onClick={() => setOpen(!open)}
aria-expanded={open}
aria-controls= "fadeID"
>
Click to see Fade Effect!
</Button>
<Fade in ={open}>
<div id= "fadeID"
style={{
width: 300,
textAlign: 'justify'
}}
>
Greetings from GeeksforGeeks, How are you?
Stay safe
Always keep yourself health.
Study and work hard.
</div>
</Fade>
</div>
</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:
Collapse Component Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Filename: App.js
Javascript
import React, { useState } from 'react' ;
import 'bootstrap/dist/css/bootstrap.css' ;
import Button from 'react-bootstrap/Button'
import Collapse from 'react-bootstrap/Collapse'
export default function App() {
const [open, setOpen] = useState( false );
return (
<div style={{ display: 'block' ,
width: 700, padding: 30 }}>
<h4>React-Bootstrap Collapse Component</h4>
<div style={{ width: 660, height: 'auto' }}>
<Button
variant= "link"
onClick={() => setOpen(!open)}
aria-expanded={open}
aria-controls= "collapseID"
>
Click to see Collapse Effect!
</Button>
<Collapse in ={open}>
<div id= "collapseID"
style={{
width: 300,
textAlign: 'justify'
}}
>
Greetings from GeeksforGeeks, How are you?
Stay safe
Always keep yourself health.
Study and work hard.
</div>
</Collapse>
</div>
</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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...