React Suite Popover Props

React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Popover Props. The popover is used to show the popup information that is triggered on any event over the parent window. The different props of popover are discussed below.

Popover props:

ts:Placement Props:

type Placement = ‘top’ | ‘bottom’ | ‘right’ | ‘left’ | ‘bottomStart’ | ‘bottomEnd’ | ‘topStart’ | ‘topEnd’ | ‘leftStart’ | ‘leftEnd’ | ‘rightStart’ | ‘rightEnd’ | ‘auto’ | ‘autoVerticalStart’ | ‘autoVerticalEnd’ | ‘autoHorizontalStart’ | ‘autoHorizontalEnd’;

<Popover> Props:

• arrow: It is used whether to show an arrow indicator or not.
• 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.
• delayClose: It is used to denote the close delay Time.
• delayOpen: It is used to denote the open delay Time.
• enterable: It is used to check whether the mouse is allowed to enter the floating layer of the popover when the trigger value is set to hover.
• followCursor: It is used to enable the speaker to follow the cursor.
• full: It is used to denote the content full of the container.
• onBlur: It is a callback function that is triggered on losing focus.
• onClick: It is a callback function that is triggered on a click event.
• onClose: It is a callback function that is triggered on closing the component.
• onEnter: It is a callback function that is triggered before the overlay transitions in.
• onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
• onEntering: It is a callback function that is triggered as the overlay begins to transition in.
• onExit: It is a callback function that is triggered right before the overlay transitions out.
• onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
• onExiting: It is a callback function that is triggered as the overlay begins to transition out.
• onFocus: It is a callback function to get the focus.
• onOpen: It is a callback function that 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.
• trigger: It is used for the triggering events.

Syntax:

<Whisper placement="top" trigger="click" speaker={
    <Popover arrow={false}>...</Popover>
}>
    <Button>...</Button>
</Whisper>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the placement, trigger, and speaker props of the popover component.

App.js

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

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Popover Props
                </h4>

                <Whisper
                    placement="bottom"
                    trigger="click"
                    speaker={
                        <Popover title="GeeksforGeeks">
                            <p>
                                You subscribed to GFG Magazine.
                            </p>
                        </Popover>
                    }>
                    <Button style={{ marginRight: 10 }}>
                        Subscribe
                    </Button>
                </Whisper>
            </div>
        </center>
    );
}

Run the Application: Run your app using the following command from the root directory of the project.

npm start

Output: Go to http://localhost:3000/ in your browser to see the output.

Example 2: Below example demonstrates the enterable and controlId props of the popover component.

Note: In the below example, the popover opens both on hover and on click.

App.js

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

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Popover Props
                </h4>

                <Whisper
                    placement="bottom"
                    trigger="hover"
                    controlId="control-id-hover-enterable"
                    enterable
                    speaker={
                        <Popover title="GeeksforGeeks">
                            <p>
                                Thanks for subscribing GFG Magazine.
                            </p>
                        </Popover>
                    }>
                    <Button style={{ marginRight: 10 }}>
                        Subscribe
                    </Button>
                </Whisper>
            </div>
        </center>
    );
}

Output:

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