@michitaro/react-menu
v1.0.3
Published
This package provides a React component for macOS like menus.
Downloads
6
Readme
react-menu
This package provides a React component for macOS like menus.
Working Demo
Features
- macOS like Menu & Menu Bar
- Nested Menu
- Context Menu
- Builtin 3 Themes
- Customizable Theme
- Keyboard Navigation
- Keyboard Shortcut
Install
npm install --save @michitaro/react-menu
API Reference
Example
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>
</>
)
}