React-Bootstrap Fade and Collapse Component

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: