ReactJS Reactstrap Popover Component

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: