usecontextmenu-react

usecontextmenu-react

Contextmenu hook in React

Install

Using npm

npm install --save usecontextmenu-react

Usage

import {ContextMenu, ContextMenuItem, useContextMenu} from 'usecontextmenu-react';

Example

See example folder

import React, {useRef} from "react";
import {ContextMenu, ContextMenuItem, useContextMenu} from 'usecontextmenu-react';

const Example = () => {
    const {menuProps, onContextMenu, visibleOnPosition} = useContextMenu();

    const blockStyle = {
        height: '200px',
        backgroundColor: 'tomato',
    }
    
    return (
        <div>
            <div onContextMenu={onContextMenu} style={blockStyle}/>

            <ContextMenu {...menuProps}>
                <ContextMenuItem>Lorem ipsum dolor</ContextMenuItem>
                <ContextMenuItem disabled>Disabled</ContextMenuItem>
                <ContextMenuItem onClick={() => console.log('Click!')}>onClick</ContextMenuItem>
                <ContextMenuItem>Lorem ipsum dolor sit</ContextMenuItem>
            </ContextMenu>
        </div>
    );
}

API

useContextMenu({onShow, onHide})

onShow: () => void - Called when the menu is visible

onHide: () => void - Called when the menu is hidden

This hook returns an object containing the following properties:

onContextMenu - The event that triggered the context menu

menuProps - Context menu props

visibleOnPosition({x: number, y: number}) - Display the context menu on custom position. You can provide x and y coordinates

License

MIT © n0mver