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/
