holee-contextmenu

Simple react contextmenu (Typescript support)

!React !Typescript    

Installing holee-contextmenu

``sh
$ yarn add holee-contextmenu

or

$ npm i holee-contextmenu
`

Project philosophy

High customization and intuition.

Usage

1. Create a useref.

`javascript
const outerRef = useRef < HTMLDivElement > null;
`

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

`javascript



`

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

`javascript
import { ContextMenu } from 'holee-contextmenu';
`

`javascript
menuOnClickHand(e)}>




`

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.)

`javascript
menuOnClickHand(e)}>


profile

send message

add friend

play game

register admin(dismissal)

block(unblock)

mute(unmute)

forced out

`

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

`javascript
const menuOnClickHandler = (e: React.MouseEvent | React.KeyboardEvent) => {
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.

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

function App() {
const outerRef = useRef(null);
const [option, setOption] = useState('null');

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

return (


);
}

export default App;
`

Custom Style

Style can be specified through className:

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

`js



profile

send message

add friend

play game

register admin(dismissal)

block(unblock)

mute(unmute)

forced out

``