React Suite Popover Used with Dropdown

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 placement. The popover is used to show the popup information that is triggered on any event over the parent window. The popovers are also used with dropdowns.

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:

Syntax:

// Import Statement
import { Popover, Button, Whisper } from "rsuite/";

// App.JS file
const MyPopover = () => (
 <Popover>
    <Dropdown.Menu>
      <Dropdown.Item eventKey={1}>...</Dropdown.Item>
      ...
    </Dropdown.Menu>
  </Popover>
);

Function App () {
return (
 <Whisper placement="rightStart" speaker={<MyPopover />} >
    <Button>...</Button>
 </Whisper>
);
}

Example 1: Below example demonstrates the basic popover used with dropdown.

Javascript

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

const MyPopover = React.forwardRef(({
onSelect, ...rest }, ref) => (
  <Popover ref={ref} {...rest} full>
    <Dropdown.Menu onSelect={onSelect}>
      <Dropdown.Item eventKey={1}>Tutorials</Dropdown.Item>
      <Dropdown.Item eventKey={2}>Practice</Dropdown.Item>
      <Dropdown.Item eventKey={3}>Courses</Dropdown.Item>
    </Dropdown.Menu>
  </Popover>
));

export default function App() {

  return (
    <div style={{ padding: 10 }}>
      <h2>GeeksforGeeks</h2>
      <h4 style={{ color: "green" }}>
        React Suite Popover with Dropdown
      </h4>

      <Whisper
        placement="rightStart"
        controlId="control-id-with-dropdown"
        trigger="click"
        speaker={<MyPopover />}
      >
        <Button color="green" appearance="primary">
          Select
        </Button>
      </Whisper>
    </div>
  );
}

Output:

Example 2: Below example demonstrates the icons-based popover used with dropdown.

Javascript

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

// Icons
import PageIcon from "@rsuite/icons/Page";
import FolderFillIcon from "@rsuite/icons/FolderFill";
import DetailIcon from "@rsuite/icons/Detail";
import FileDownloadIcon from "@rsuite/icons/FileDownload";

const MyPopover = React.forwardRef(({ onSelect, ...rest }, ref) => (
  <Popover ref={ref} {...rest} full>
    <Dropdown.Menu onSelect={onSelect}>
      <Dropdown.Item eventKey={1} icon={<PageIcon />}>
        Create New file
      </Dropdown.Item>
      <Dropdown.Item eventKey={2} icon={<FileDownloadIcon />}>
        Download
      </Dropdown.Item>
      <Dropdown.Item eventKey={3} icon={<DetailIcon />}>
        Export PDF
      </Dropdown.Item>
    </Dropdown.Menu>
  </Popover>
));

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

      <Whisper
        placement="rightStart"
        controlId="control-id-with-dropdown"
        trigger="click"
        speaker={<MyPopover />}
      >
          <IconButton
            icon={<FolderFillIcon />}
            appearance="primary"
            color="orange"
          >
            Select File
          </IconButton>
      </Whisper>
    </div>
  );
}

Output:

Reference: https://rsuitejs.com/components/popover/#used-with-dropdown