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 neveropen, 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 neveropen, 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:
Reference:Â
- https://react-bootstrap.github.io/utilities/transitions/#collapse
- https://react-bootstrap.github.io/utilities/transitions/#fade
