Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork0
react typescript context menu
License
NotificationsYou must be signed in to change notification settings
hochan222/holee-contextmenu
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
$ yarn add holee-contextmenu# or$ npm i holee-contextmenuHigh customization and intuition.
- Create a useref.
constouterRef=useRef<HTMLDivElement>null;
- Designate as ref to the div tag you want to apply the context menu to.
<divref={outerRef}className="red-box"></div>
- Import the menu and create a menu above the div tag.
import{ContextMenu}from'holee-contextmenu';
<ContextMenuouterRef={outerRef}menuOnClick={(e)=>menuOnClickHand(e)}></ContextMenu><divref={outerRef}className="red-box"></div>
- A menu list of contextmenu can be created by passing the li tag as children in the menu. (A
data-optionmust be specified.)
<ContextMenuouterRef={outerRef}menuOnClick={(e)=>menuOnClickHand(e)}><lidata-option="profile">profile</li><lidata-option="send-message">send message</li><lidata-option="add-friend">add friend</li><lidata-option="play-game">play game</li><lidata-option="register-admin">register admin(dismissal)</li><lidata-option="block">block(unblock)</li><lidata-option="mute">mute(unmute)</li><lidata-option="forced-out">forced out</li></ContextMenu><divref={outerRef}className="red-box"></div>
menuOnClickHandlerdefines an onclick function that is executed when the list is clicked.
constmenuOnClickHandler=(e:React.MouseEvent|React.KeyboardEvent<HTMLUListElement>)=>{const eventTarget=e.targetasHTMLUListElement;if(eventTarget){setOption(()=>eventTarget.dataset.option);}};
- Below is the final code, please refer to theexample code for details.
importReact,{useRef,useState}from'react';import{ContextMenu}from'holee-contextmenu';import'./App.css';functionApp(){constouterRef=useRef<HTMLDivElement>(null);const[option,setOption]=useState<string|undefined>('null');constmenuOnClickHandler=(e:React.MouseEvent|React.KeyboardEvent<HTMLUListElement>)=>{const eventTarget=e.targetasHTMLUListElement;if(eventTarget){setOption(()=>eventTarget.dataset.option);}};return(<divclassName="App"><h2>holee-context-menu</h2><p>⬇️ Click right mouse inside the red box ⬇️</p><ContextMenuouterRef={outerRef}menuOnClick={(e)=>menuOnClickHandler(e)}><lidata-option="profile">profile</li><lidata-option="send-message">send message</li><lidata-option="add-friend">add friend</li><lidata-option="play-game">play game</li><lidata-option="register-admin">register admin(dismissal)</li><lidata-option="block">block(unblock)</li><lidata-option="mute">mute(unmute)</li><lidata-option="forced-out">forced out</li></ContextMenu><divref={outerRef}className="red-box"></div><p><strong>eventTarget.dataset.option:</strong>{option}</p></div>);}exportdefaultApp;
Style can be specified through className:
.ul-class-nameli {padding:10px;color: blue;}
<ContextMenuclassName="ul-class-name"outerRef={outerRef}menuOnClick={(e=menuOnClickHandler(e))}><lidata-option="profile">profile</li><lidata-option="send-message">send message</li><lidata-option="add-friend">add friend</li><lidata-option="play-game">play game</li><lidata-option="register-admin">register admin(dismissal)</li><lidata-option="block">block(unblock)</li><lidata-option="mute">mute(unmute)</li><lidata-option="forced-out">forced out</li></ContextMenu>
About
react typescript context menu
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.