Simple Context menu component for react showing all inherited parents menu with SSR compatibility.
Check the sample here ( sources )
npm i react-inheritable-contextmenu -s Because none of the existing ones have met my requirements :
- Ability to inherit & include parents context menus
- Possibility to render menu items basing the browser event
- Render menus just in time
- Simple to use
- Simple to animate with css
- Do not break SSR
Version ^2.0.0 only work with React ^18
Use V1.x.x for previous React versions
import { ContextMenu } from "react-inheritable-contextmenu"; // override default rendered comps // * there is no css builtin, but there is classNames .inContextMenuLayer > .inContextMenu .inContextSubMenu ContextMenu.DefaultMenuComp = Paper //ContextMenu.DefaultMenuComp = ( { children } ) => // <div className={"contextMenu"}> // <div>Da menu:</div> // <hr/> // {children || ''} // </div>; //ContextMenu.DefaultSubMenuComp = ( { children } ) => // <> // <hr/> // {children || ''} // <hr/> // </>; // add optional cool anims ( choose & add in css any anims in http://animista.net/ ) ContextMenu.DefaultShowAnim = 'slide-in-blurred-left'; ContextMenu.DefaultHideAnim = 'slide-out-blurred-right'; // set show/hide anims duration (default to 250) ContextMenu.DefaultAnimDuration = 200; // Some trigering options ( defaults ) // ContextMenu.DefaultMenuEvent = "contextmenu"; // ContextMenu.shouldUseContextMenu = e => (e.button === 2 && e.buttons !== 4); // Default: don't trigger if right click + middle click render(){ return <div className={ "root" }> <ContextMenu> <div>Menu root</div> </ContextMenu> Root contextual menu available here <br/> <br/> <br/> <div className={ "block" }> another one which inherit the 1st<br/> <ContextMenu> <div>Menu 2</div> </ContextMenu> </div> <div className={ "block" }> same using some contextual render fn<br/> <ContextMenu // show Menu root & menu 2 renderMenu={ ( e, allMenuComps ) => <div>Menu 2 <i>x:{ e.x } x:{ e.y }</i></div> }/> </div> <div className={ "block" }> Without parent's menu<br/> <ContextMenu root // don't show parent's menu renderMenu={ ( e, allMenuComps ) => <div>Menu <i>x:{ e.x } x:{ e.y }</i></div> }/> </div> <div className={ "block" }> native menu<br/> <ContextMenu native // use natve menu /> </div> <br/> <br/> <br/> </div>; } //... 
BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a
Paypal : 
MIT license