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
