react-overlays — Dropdowns

Dropdowns are something that we have to add often into our React app.

To make this task easier, we can use existing component libraries to add them.

In this article, we’ll look at how to add dropdowns into our React app with the react-overlays library.

Dropdowns

We can add dropdowns easily with the Dropdown component and the useDropdownMenu and useDropdownToggle hooks.

For example, we can write:

import React, { useState } from "react";
import styled from "styled-components";
import Dropdown from "react-overlays/Dropdown";
import { useDropdownMenu, useDropdownToggle } from "react-overlays";

const MenuContainer = styled("div")`
  display: ${(p) => (p.show ? "flex" : "none")};
  min-width: 150px;
  position: absolute;
  z-index: 1000;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
`;

const Menu = ({ role }) => {
  const { show, onClose, props } = useDropdownMenu({
    flip: true,
    offset: [0, 8]
  });
  return (
    <MenuContainer {...props} role={role} show={show}>
      <button type="button" onClick={onClose}>
        Item 1
      </button>
      <button type="button" onClick={onClose}>
        Item 2
      </button>
    </MenuContainer>
  );
};

const Toggle = ({ id, children }) => {
  const [props, { show, toggle }] = useDropdownToggle();
  return (
    <button type="button" className="btn" id={id} {...props} onClick={toggle}>
      {children}
    </button>
  );
};

const DropdownButton = ({ show, onToggle, drop, alignEnd, title, role }) => (
  <Dropdown
    show={show}
    onToggle={onToggle}
    drop={drop}
    alignEnd={alignEnd}
    itemSelector="button:not(:disabled)"
  >
    {({ props }) => (
      <div {...props} className="relative inline-block">
        <Toggle id="example-toggle">{title}</Toggle>
        <Menu role={role} />
      </div>
    )}
  </Dropdown>
);

const ButtonToolbar = styled("div")`
  & > * + * {
    margin-left: 12px;
  }
`;

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <ButtonToolbar className="dropdown-example">
      <DropdownButton
        show={show}
        onToggle={(nextShow) => setShow(nextShow)}
        title={`${show ? "Close" : "Open"} Dropdown`}
      />
      <DropdownButton alignEnd title="Align right" />
      <DropdownButton drop="up" title="Drop up" />
      <DropdownButton role="menu" title="Role 'menu'" />
    </ButtonToolbar>
  );
}

First, we create the MenuContainer component, which has the menu buttons.

It’s the container for dropdown menus.

It checks the show prop to determine whether it’s shown or not.

And we make it absolute positioned to open in the location where we clicked on the menu button.

Next, we create the Menu component to hose the MenuContainer with buttons that calls onClose when we click the buttons.

This will close the dropdowns.

The onClose function is returned by the useDropdownMenu hook.

We pass all the props returned by the hook to the MenuContainer to control whether it’s opened or closed.

The show function lets us show the menu.

Then we add the Toggle component to add the dropdown toggles.

The children prop has the button content.

And the toggle function lets us toggle the menu.

toggle is returned by the useDropdownToggle prop.

We then add the DropdownButton to incorporate the toggle with the menu to let us close the menu when we click on tyhe button or when we click outside.

The ButtonToolbar component is another div to contain the dropdown buttons.

We add the DropdownButtons to open the dropdown when we click on them.

Conclusion

We can add dropdowns into our React app easily with the react-overlays library.