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

Why another context menu ?

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

Note

Version ^2.0.0 only work with React ^18 Use V1.x.x for previous React versions

Usage

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>;
}

//...

You... like it / it saved your day / you stole all the code / you want more?

BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a Paypal :

License ?

MIT license