hochan222/holee-contextmenu

react typescript context menu

holee-contextmenu

Simple react contextmenu (Typescript support)

Installing holee-contextmenu

$ yarn add holee-contextmenu

# or

$ npm i holee-contextmenu

Project philosophy

High customization and intuition.

Usage

1. Create a useref.

const outerRef = useRef < HTMLDivElement > null;

2. Designate as ref to the div tag you want to apply the context menu to.

<div ref={outerRef} className="red-box"></div>

3. Import the menu and create a menu above the div tag.

import { ContextMenu } from 'holee-contextmenu';

<ContextMenu outerRef={outerRef} menuOnClick={(e) => menuOnClickHand(e)}>
</ContextMenu>
<div ref={outerRef} className="red-box"></div>

4. A menu list of contextmenu can be created by passing the li tag as children in the menu. (A data-option must be specified.)

<ContextMenu outerRef={outerRef} menuOnClick={(e) => menuOnClickHand(e)}>
  <li data-option="profile">profile</li>
  <li data-option="send-message">send message</li>
  <li data-option="add-friend">add friend</li>
  <li data-option="play-game">play game</li>
  <li data-option="register-admin">register admin(dismissal)</li>
  <li data-option="block">block(unblock)</li>
  <li data-option="mute">mute(unmute)</li>
  <li data-option="forced-out">forced out</li>
</ContextMenu>
<div ref={outerRef} className="red-box"></div>

5. menuOnClickHandler defines an onclick function that is executed when the list is clicked.

  const menuOnClickHandler = (e: React.MouseEvent | React.KeyboardEvent<HTMLUListElement>) => {
    const eventTarget = e.target as HTMLUListElement;
    if (eventTarget) {
      setOption(() => eventTarget.dataset.option);
    }
  };

6. Below is the final code, please refer to the example code for details.

import React, { useRef, useState } from 'react';
import { ContextMenu } from 'holee-contextmenu';
import './App.css';

function App() {
  const outerRef = useRef<HTMLDivElement>(null);
  const [option, setOption] = useState<string | undefined>('null');

  const menuOnClickHandler = (e: React.MouseEvent | React.KeyboardEvent<HTMLUListElement>) => {
    const eventTarget = e.target as HTMLUListElement;
    if (eventTarget) {
      setOption(() => eventTarget.dataset.option);
    }
  };

  return (
    <div className="App">
      <h2>holee-context-menu</h2>
      <p>⬇️ Click right mouse inside the red box ⬇️</p>

      <ContextMenu outerRef={outerRef} menuOnClick={(e) => menuOnClickHandler(e)}>
        <li data-option="profile">profile</li>
        <li data-option="send-message">send message</li>
        <li data-option="add-friend">add friend</li>
        <li data-option="play-game">play game</li>
        <li data-option="register-admin">register admin(dismissal)</li>
        <li data-option="block">block(unblock)</li>
        <li data-option="mute">mute(unmute)</li>
        <li data-option="forced-out">forced out</li>
      </ContextMenu>
      <div ref={outerRef} className="red-box"></div>

      <p>
        <strong>eventTarget.dataset.option: </strong> {option}
      </p>
    </div>
  );
}

export default App;

Custom Style

Style can be specified through className:

.ul-class-name li {
  padding: 10px;
  color: blue;
}

<ContextMenu className="ul-class-name" outerRef={outerRef} menuOnClick={(e = menuOnClickHandler(e))}>
  <li data-option="profile">profile</li>
  <li data-option="send-message">send message</li>
  <li data-option="add-friend">add friend</li>
  <li data-option="play-game">play game</li>
  <li data-option="register-admin">register admin(dismissal)</li>
  <li data-option="block">block(unblock)</li>
  <li data-option="mute">mute(unmute)</li>
  <li data-option="forced-out">forced out</li>
</ContextMenu>