项目作者: transflow

项目描述 :
React hook to display an Electron context menu
高级语言: TypeScript
项目地址: git://github.com/transflow/use-electron-context-menu.git
创建时间: 2021-02-09T19:16:42Z
项目社区:https://github.com/transflow/use-electron-context-menu

开源协议:

下载


use-electron-context-menu

0 dependencies

Installation

  1. npm install use-electron-context-menu

Note: If you prefer yarn instead of npm, just use yarn add use-electron-context-menu.

How to use

  1. import React, { useRef } from "react"
  2. import useContextMenu from "use-electron-context-menu"
  3. export default function App() {
  4. const ref = useRef(null)
  5. useContextMenu(ref, [
  6. {
  7. label: "Copy",
  8. click: () => console.log("copied")
  9. }
  10. ])
  11. return (
  12. <div ref={ref} style={{ width: 200, height: 100 }}>
  13. {/* right clicking this area will spawn the context menu */}
  14. </div>
  15. )
  16. }

API

  1. const { closeMenu } = useContextMenu(ref, menuItems, options)

Parameters

  • ref: React element you want to add the context menu to
  • menuItems: An array of Electron menu items
  • options: (optional) An object of options for this hook

Return Values

  • closeMenu(): Force the context menu to close

Options

  • x: Display context menu at fixed x coordinate
  • y: Display context menu at fixed y coordinate
  • onContext(event): Called when context menu opens
  • onClose(): Called when context menu closes