Open In App

ReactJS Reactstrap Popover Component

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads