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>neveropen</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>neveropen</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
