Getting Started with React Development with the React Suite Library — Advanced Dropdowns

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Dropdown Dividers and Panels

We can add dividers into our dropdown menu with the divider prop:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item divider />
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

And we can add a panel into the dropdown with the panel prop:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item panel style={{ padding: 10, width: 160 }}>
          <strong>Select a fruit</strong>
        </Dropdown.Item>
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We can change the placement of the dropdown menu with the placement prop:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" placement="rightStart">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

Other values include leftStart , leftEnd , bottomStart , bottomEnd , rightEnd , topStart and topEnd .

We can nest dropdown menus in another dropdown menu.

For instance, we can write:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
        <Dropdown.Menu title="Color">
          <Dropdown.Item>Green</Dropdown.Item>
          <Dropdown.Item>Red</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

We put the Dropdown.Menu into the Dropdown to add a nested menu.

Also, we can add a menu button that has an icon in the button content.

For instance. we can write:

import React from "react";
import { Dropdown, IconButton, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown
        title="Fruit"
        renderTitle={() => {
          return (
            <IconButton icon={<Icon icon="plus" />} placement="left">
              Fruit
            </IconButton>
          );
        }}
      >
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We add the IconButton into the renderTitle prop to render the button.

Also, we can use dropdowns with popovers by writing:

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

const MenuPopover = ({ onSelect, ...rest }) => {
  return (
    <Popover {...rest} full>
      <Dropdown.Menu onSelect={onSelect}>
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown.Menu>
    </Popover>
  );
};

export default function App() {
  const triggerRef = React.createRef();
  const handleSelectMenu = (eventKey, event) => {
    console.log(eventKey);
    triggerRef.current.hide();
  };

  return (
    <div className="App">
      <Whisper
        placement="bottomStart"
        trigger="click"
        triggerRef={triggerRef}
        speaker={<MenuPopover onSelect={handleSelectMenu} />}
      >
        <Button>Fruit</Button>
      </Whisper>
    </div>
  );
}

We create the MenuPopover component that takes props.

We pass onSelect to Dropdown.Menu to lets us control the menu from the button trigger.

The rest of the props are passed into the Popover component.

To add the popover trigger, we add the Whisper component and add a Button inside to make the Button a popover trigger.

We make the menu open by passing MenuPopover into the speaker prop.

Conclusion

We can add dropdowns with various options with React Suite.