Skip to content
Related Articles

Related Articles

Improve Article

React-Bootstrap Fade and Collapse Component

  • Last Updated : 18 May, 2021

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 which 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.

App.js




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 keey 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.

App.js




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 keey 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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :