Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Popover component is a container-type element that hovers over the parent window. We can use the following approach in ReactJS to use the ReactJS Reactstrap Popover Component.
Popover Props:
- children: It is used to pass the children element to this component.
- trigger: It is used to denote a space-separated list of triggers.
- isOpen: It is used to indicate whether to open popover or not.
- toggle: It is a callback function for toggling isOpen in the controlling component.
- boundariesElement: It is used to denote the boundaries for a popper.
- container: It is used to indicate where to inject the popper DOM node.
- className: It is used to denote the class name for styling.
- popperClassName: It is used to apply a class to the popper component.
- innerClassName: It is used to apply a class to the inner-popover.
- disabled: It is used to indicate whether the component is disabled or not.
- hideArrow: It is used to indicate whether to hide an arrow or not. Â
- placementPrefix: It is used to denote the placement prefix class like bs-popover, etc.
- delay: It is used to denote the delay value.
- placement: It is used for the placement of the popover.
- modifiers: It is used to denote a custom modifier that is passed to Popper.js
- positionFixed: It is used to indicate whether the popover pointing element has position: fixed styling or not.
- offset: It is used to denote offset element.
- fade: It is used to indicate whether to show/hide the popover with a fade effect.
- flip: It is used to indicate whether to flip the direction of the popover if too close to the container edge.
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. foldername, 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 reactstrap bootstrap
Project Structure: It will look like the following.
Project Structure
Example 1: Now write down the following code in the App.js file. Here we have shown Popover with a header component and the placement of popover is at the bottom position.
Javascript
import React from 'react'import 'bootstrap/dist/css/bootstrap.min.css'; import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap"  function App() {       // Popover open state     const [popoverOpen, setPopoverOpen] = React.useState(false);       return (         <div style={{             display: 'block', width: 700, padding: 30         }}>             <h4>ReactJS Reactstrap Popover Component</h4>             <Button id="Popover1" type="button">                 Click me to Open Popover             </Button> <br></br>             <Popover                 placement="bottom" isOpen={popoverOpen}                 target="Popover1" toggle=                     {() => { setPopoverOpen(!popoverOpen) }}>                 <PopoverHeader>Sample Popover Title</PopoverHeader>                 <PopoverBody>Sample Body Text to display...</PopoverBody>             </Popover>         </div >     ); }   export default App; |
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:
Example 2: Now write down the following code in the App.js file. Here we have shown Popover without a header component and the placement of popover is at the right position.
Javascript
import React from 'react'import 'bootstrap/dist/css/bootstrap.min.css'; import { Button, Popover, PopoverBody } from "reactstrap"  function App() {       // Popover open state     const [popoverOpen, setPopoverOpen] = React.useState(false);       return (         <div style={{             display: 'block', width: 700, padding: 30         }}>             <h4>ReactJS Reactstrap Popover Component</h4>             <Button id="Popover" color="primary">                 Click to Open Popover             </Button> <br></br>             <Popover                 placement="right" isOpen={popoverOpen}                 target="Popover" toggle=                     {() => { setPopoverOpen(!popoverOpen) }}>                 <PopoverBody>Sample Body Text to display...</PopoverBody>             </Popover>         </div >     ); }   export default App; |
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://reactstrap.github.io/components/popovers/
