open-index/open-npm huggingface dataset:
npm package: @michitaro/react-menu
Description: This package provides a React component for macOS like menus.
Latest version: 1.0.3

# react-menu

This package provides a React component for macOS like menus.

![Screenshot](./media/screenshot.png)

## [Working Demo](https://michitaro.github.io/react-menu/example/)

## Features
* macOS like Menu & Menu Bar
* Nested Menu
* Context Menu
* Builtin 3 Themes
* Customizable Theme
* Keyboard Navigation
* Keyboard Shortcut

## Install
```sh
npm install --save @michitaro/react-menu
```

## [API Reference](https://michitaro.github.io/react-menu/docs/)

## Example

```jsx
import React, { useState } from "react"
import { MenuBar, MenuBarItem, MenuItem, MenuSeparator } from "@michitaro/react-menu"

export function BasicExample() {
  const [checked, setChecked] = useState(false)

  return (
    <>
      <MenuBar style={{ borderRadius: '0 0 8px 0' }}>
        <MenuBarItem label="File">
          <MenuItem label="New" onClick={() => alert('New')} />
          <MenuItem label="Open" onClick={() => alert('Open')} />
          <MenuSeparator />
          <MenuItem label="Save" disabled />
          <MenuItem label="Export">
            <MenuItem label="PDF..." />
            <MenuItem label="PNG..." />
          </MenuItem>
        </MenuBarItem>
        <MenuBarItem label="Edit">
          <MenuItem label="Undo" keybind="meta+KeyZ" onClick={() => alert('Undo')} />
          <MenuSeparator />
          <MenuItem label="Cut" keybind="meta+KeyX" onClick={() => alert('Cut')} />
          <MenuItem label="Copy" keybind="meta+KeyC" onClick={() => alert('Copy')} />
          <MenuItem label="Paste" keybind="meta+KeyV" onClick={() => alert('Paste')} />
        </MenuBarItem>
        <MenuBarItem label="Checkmark">
          <MenuItem label="Check" checked={checked} onClick={() => setChecked(true)} disabled={checked} />
          <MenuItem label="Uncheck" checked={!checked} onClick={() => setChecked(false)} disabled={!checked} />
          <MenuSeparator />
          <MenuItem label={checked ? '😁 Checked' : '🙂 Unchecked'} checked={checked} onClick={() => setChecked(_ => !_)} />
        </MenuBarItem>
      </ MenuBar>
    </>
  )
}
```