@react-md/menu

@react-md/menu

Create accessible dropdown menus that auto-position themselves to stay within the viewport. The menus are entirely navigable with a keyboard along with some additional behavior:

• ArrowUp and ArrowDown to focus the previous/next MenuItem that also allows wrapping
• Home and End to focus the first/last Menuitem in the menu
• type the starting letters of a MenuItem to focus it

More information on the built-in accessibility can be found in the accessibility example on the documentation site.

Installation

npm install --save @react-md/menu

You will also need to install the following packages for their styles:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/list \
  @react-md/button \
  @react-md/states \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import React from "react";
import { render } from "react-dom";
import { DropdownMenu } from "@react-md/menu";

const App = () => (
  <DropdownMenu
    id="example-dropdown-menu"
    items={[
      { onClick: () => console.log("Clicked Item 1"), children: "Item 1" },
      { onClick: () => console.log("Clicked Item 2"), children: "Item 2" },
      { onClick: () => console.log("Clicked Item 3"), children: "Item 3" },
    ]}
  >
    Dropdown
  </DropdownMenu>
);

render(<App />, document.getElementById("root"));

Changelog

2.5.0 (2020-12-15)

Bug Fixes

• @react-md/form: better blur error cases for useNumberField (8b927ab)
• @react-md/form: fixed FormMessage counter prop-type validation (9ece3e1)
• @react-md/form: fixed messageProps error from react when disableMessage is enabled (e452aff)
• @react-md/form: Floating Label for controlled value Invalid numbers (ef1d764)
• @react-md/form: Maintain Floating Label for Invalid Numbers (2443f9a)
• @react-md/form: More fixes for number inputs being considered valued (1832e69)
• @react-md/form: updated TextField PropTypes to allow for search input type (23d92dd)
• @react-md/utils: GridCell now correctly uses largeDesktop when desktop is also provided (fd26b8b)
• @react-md/utils: nearest ensures min and max range for value (48181b3)
• @react-md/utils: updated nearest to support a custom range for sliders (6cfc67e)

Features

• @react-md/form: added a new useTextField hook to validate the TextField and TextArea values (578257c)
• @react-md/form: added a number-recommended type for validation (18c772e)
• @react-md/form: added a PasswordWithMessage component to be used with useTextField Hook (f6d84f2)
• @react-md/form: added a TextAreaWithMessage component to be used with useTextField Hook (e358799)
• @react-md/form: added a TextFieldWithMessage component to be used with useTextField Hook (f2d7e5d)
• @react-md/form: added a useNumberField hook to control number field values (c705f2c)
• @react-md/form: better defaults for validation (4003a07)
• @react-md/icon: added an error icon to the IconProvider Component and useIcon Hook (4dfd50a)
• @react-md/icon: added flexReverse prop to TextIconSpacing (c4ee05b)
• @react-md/utils: added a withinRange util for number validation (e8fb252)
• @react-md/utils: changed the default @include order for easier overrides (4705b09)