### HOC Implementation with React-Menu v3

Source: https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3

Illustrates the simplified HOC (Higher-Order Component) pattern in React-Menu v3. This example shows how to create a component enhanced by a higher-order function, directly passing the enhanced component to MenuItem without needing applyHOC or applyStatics.

```jsx
const enhance = (WrappedComponent) => {
  // ... HOC logic ...
};

const MyMenuItem = enhance(MenuItem);

```

--------------------------------

### Install React-Menu package with npm or Yarn

Source: https://github.com/szhsin/react-menu/blob/master/README.md

Installs the @szhsin/react-menu library using npm or Yarn package managers. This command adds the React menu components to your project dependencies. Requires Node.js environment with npm or Yarn installed.

```bash
npm install @szhsin/react-menu
```

```bash
yarn add @szhsin/react-menu
```

--------------------------------

### Component Wrapping with React-Menu v3

Source: https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3

Demonstrates how to wrap MenuItem components in React-Menu v3 without using applyStatics. The example shows a custom MenuItem component that applies custom styling, and highlights that prop forwarding is optional and no longer strictly required for basic functionality.

```jsx
import {
  MenuItem
} from "@szhsin/react-menu";

const MyMenuItem = (props) => {
  return (
    <div style={{ border: "2px solid" }}>
      <MenuItem 
      />
    </div>
  );
};

```

--------------------------------

### useMenuState Hook Return Value Change

Source: https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3

Highlights the change in the return value shape of the 'useMenuState' hook in React-Menu v3. It now returns an array, making it easier to manage multiple menu states within the same component. The example shows the destructuring difference.

```diff
- const { toggleMenu, ...menuProps } = useMenuState({ transition: true });
+ const [menuProps, toggleMenu] = useMenuState({ transition: true });

<ControlledMenu {...menuProps} anchorRef={ref}>
</ControlledMenu>

```

--------------------------------

### Explicit Overflow Handling with setDownOverflow

Source: https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3

Demonstrates the new 'setDownOverflow' prop in React-Menu v3 for managing menu overflow. This prop must be explicitly added to the Menu component when a MenuGroup with 'takeOverflow' is used to handle content that exceeds the visible area.

```diff
<Menu     
+ setDownOverflow
  overflow="auto">
  <MenuGroup takeOverflow>
      // many menu items causing overflow ...
  </MenuGroup>
</Menu>

```

--------------------------------

### Add icons and images to submenu label

Source: https://github.com/szhsin/react-menu/blob/master/docs/FAQs.md

Customize submenu labels to include icons, images, and other JSX elements beyond plain text. The label prop accepts any valid JSX element, allowing for rich content display in submenu headers. Includes examples of img elements and ArrowIcon component alongside text content.

```jsx
<SubMenu
  label={
    <>
      <img src="edit.png" alt="edit" />
      Edit
      <ArrowIcon />
    </>
  }
/>
```

--------------------------------

### Explicit Radio Type for Menu Items

Source: https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3

Shows the required change for radio menu items in React-Menu v3. Previously, the 'type="radio"' prop was set automatically for items within a MenuRadioGroup. Now, it must be explicitly defined on each MenuItem.

```diff
- <MenuItem value="red">Red</MenuItem>
+ <MenuItem value="red" type="radio">Red</MenuItem>

```

--------------------------------

### Server-side render menu with initialMounted prop

Source: https://github.com/szhsin/react-menu/blob/master/docs/FAQs.md

Configure menus to render on the server side by setting the initialMounted prop. This ensures menus and their descendants are mounted before being opened, solving the issue where default behavior only renders after first open. Works with both Menu component and ControlledMenu with useMenuState hook.

```jsx
<Menu initialMounted />
```

```js
useMenuState({ initialMounted: true });
```

--------------------------------

### Implement React menu component with submenu support

Source: https://github.com/szhsin/react-menu/blob/master/README.md

Creates a basic React menu component with nested submenu structure. Imports Menu, MenuItem, MenuButton, and SubMenu components from the library. Renders an accessible menu with keyboard navigation and ARIA support.

```jsx
import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';

export default function App() {
  return (
    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
      <MenuItem>New File</MenuItem>
      <MenuItem>Save</MenuItem>
      <SubMenu label="Edit">
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
      </SubMenu>
      <MenuItem>Print...</MenuItem>
    </Menu>
  );
}
```

--------------------------------

### Set fixed gap between menu and anchor using gap prop

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v4.md

Demonstrates the simplified syntax in v4 to create a 10-pixel gap between the menu and its anchor by using the gap prop. No need to calculate direction-specific offsets. Works for any placement direction.

```jsx
<Menu gap={10} />
```

--------------------------------

### Adjust menu position using offsetX/offsetY (legacy)

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v4.md

This snippet shows how to position a menu relative to its anchor using the legacy offsetX and offsetY props. It conditionally sets offsets based on the menu's direction. The approach is superseded by the new gap and shift props in v4.

```jsx
<Menu
  offsetX={direction === 'left' || direction === 'right' ? 10 : 0}
  offsetY={direction === 'top' || direction === 'bottom' ? 10 : 0}
/>
```

--------------------------------

### Remove applyHOC for Higher-Order Components in React

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v3.md

Shows the removal of applyHOC and applyStatics for HOCs in React-Menu v3, as keyboard navigation changes make them unnecessary. This allows direct application of HOCs to MenuItem. It requires React 16.14.0+ and directly enhances WrappedComponent without additional calls.

```javascript
const enhance = (WrappedComponent) => {
  ...
};
- const MyMenuItem = applyHOC(enhance)(MenuItem);
+ const MyMenuItem = enhance(MenuItem);
```

--------------------------------

### Update useMenuState Hook Return in React

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v3.md

Shows changing useMenuState from object to array return in React-Menu v3 for easier multiple menu handling. It returns [menuProps, toggleMenu] instead of an object. This enhances usability in components with multiple menus and requires direct destructuring.

```javascript
- const { toggleMenu, ...menuProps } = useMenuState({ transition: true });
+ const [menuProps, toggleMenu] = useMenuState({ transition: true });

<ControlledMenu {...menuProps} anchorRef={ref}>
</ControlledMenu>
```

--------------------------------

### Remove applyStatics for Component Wrapping in React

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v3.md

Demonstrates removing applyStatics from MenuItem wrapping components in React-Menu v3 due to re-implemented keyboard navigation. This change simplifies component creation by eliminating the need for statics forwarding. It assumes React 16.14.0+ and only affects components using applyStatics in previous versions.

```javascript
import {
- applyStatics,
  MenuItem
} from "@szhsin/react-menu";

const MyMenuItem = (props) => {
  return (
    <div style={{ border: "2px solid" }}>
      <MenuItem
-     {...props} // props forwarding or spreading is optional and no longer required
      />
    </div>
  );
};
- applyStatics(MenuItem)(MyMenuItem);
```

--------------------------------

### Pass additional attributes to submenu label

Source: https://github.com/szhsin/react-menu/blob/master/docs/FAQs.md

Extend submenu label functionality by passing custom props using the itemProps prop. This allows setting CSS classes, inline styles, event handlers, and other attributes on the submenu label element. Useful for styling, event tracking, and accessibility enhancements.

```jsx
<SubMenu
  itemProps={{
    className: 'submenu-label',
    style: { backgroundColor: 'lightblue' },
    onClick: () => console.log('Clicked!')
  }}
/>
```

--------------------------------

### Customize menu arrow with arrowProps

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v4.md

Shows how to replace the deprecated arrowClassName and arrowStyle props with arrowProps, passing className and style to the arrow element. Allows any attributes or events on the arrow. Compatible with React-Menu v4.

```jsx
<Menu
  arrowProps={{
    className: 'my-custom-arrow',
    style: { backgroundColor: 'blue' }
  }}
/>
```

--------------------------------

### Specify setDownOverflow on Overflowing Menus in React

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v3.md

Demonstrates adding setDownOverflow prop to Menu components in React-Menu v3 to handle overflow manually. This replaces automatic overflow setting to child MenuGroups. It works with overflow="auto" and MenuGroup with takeOverflow.

```javascript
<Menu
+ setDownOverflow
  overflow="auto">
  <MenuGroup takeOverflow>
      // many menu items causing overflow ...
  </MenuGroup>
</Menu>
```

--------------------------------

### Specify type="radio" Explicitly on Menu Items in React

Source: https://github.com/szhsin/react-menu/blob/master/docs/migration/v3.md

Illustrates explicitly setting type="radio" on MenuItem components within MenuRadioGroup in React-Menu v3, as automatic setting was removed. This ensures correct radio behavior. It depends on React-Menu v3 and only applies to radio menu items.

```javascript
- <MenuItem value="red">Red</MenuItem>
+ <MenuItem value="red" type="radio">Red</MenuItem>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.