React Suite Popover Component

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Popover Component allows the user to show the popup information that is trigger on some event over the parent window. We can use the following approach in ReactJS to use the React Suite Popover Component.

Popover Props:

• children: It is used to denote the content of the component.
• classPrefix: It is used to denote the prefix of the component CSS class.
• title: It is used to denote the title of the component.
• visible: It is used to denote the component is visible by default.

Whisper Props:

• container: It is used to set the rendering container.
• delay: It is used to denote the delay Time.
• delayHide: It is used to denote the hidden delay Time.
• delayShow: It is used to denote the show delay Time.
• enterable: It is used to indicate whether the mouse is allowed to enter the floating layer of the popover when trigger value is set to hover.
• full: It is used to denote the content full the container.
• onBlur: It is a callback function which is triggered on losing the focus.
• onClick: It is a callback function which is triggered on click event.
• onClose: It is a callback function which is triggered on closing the component.
• onEnter: It is a callback function which is triggered before the overlay transitions in.
• onEntered: It is a callback function which is triggered after the overlay finishes transitioning in.
• onEntering: It is a callback function which is triggered as the overlay begins to transition in.
• onExit: It is a callback function which is triggered right before the overlay transitions out.
• onExited: It is a callback function which is triggered after the overlay finishes transitioning out.
• onExiting: It is a callback function which is triggered as the overlay begins to transition out.
• onFocus: It is a callback function to get the focus.
• onMouseOut: It is a callback function which is triggered on mouse leave event.
• onOpen: It is a callback function which is triggered when the open component.
• placement: It is used for the placement of the component.
• preventOverflow: It is used to prevent floating element overflow.
• speaker: It is used to display the component.
• trigger: It is used for the triggering events.
• triggerRef: It is used to denote the Ref of trigger.

Whisper Methods:

• open: It is a function that is used to display the popover.
• close: It is a function that is used to hide the popover.

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 rsuite

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

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

In this example, we have learnt to use a Dropdown menu as a Popover

Javascript

import React from 'react'
import 'rsuite/dist/rsuite.min.css';
import { Popover, Whisper, Button } from 'rsuite';
import { Dropdown } from 'rsuite';

export default function App() {

  return (
    <div style={{
      display: 'block', width: 600, paddingLeft: 30
    }}>
    <h1 style={{color:'green'}}>GeeksforGeeks</h1>
      <h4>React Suite Popover Component</h4> <br></br>
      <Whisper
        trigger="click"
        placement='bottom'
        speaker={
          <Popover title="Geeks Menu">
          <Dropdown.Menu >
          <Dropdown.Item >New File</Dropdown.Item>
          <Dropdown.Item >New File with Current Profile</Dropdown.Item>
          <Dropdown.Item>Download As...</Dropdown.Item>
          <Dropdown.Item >Export PDF</Dropdown.Item>

        </Dropdown.Menu>
          </Popover>
        }
      >
        <Button appearance="subtle">
          Click me to Open Popover
        </Button>
      </Whisper>
    </div>
  );
}

OUTPUT

Reference: https://rsuitejs.com/components/popover/