npm install react-inheritable-contextmenu

react-inheritable-contextmenu

Samples

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`

`jsx

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 } ) => //


//		                                                   Da menu:

//		                                                   

//		                                                   {children || ''}
//

;
//ContextMenu.DefaultSubMenuComp     = ( { children } ) =>
//	<>
//		

//		{children || ''}
//		

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

        
            Menu root

        
        Root contextual menu available here
        

        

        

        
            another one which inherit the 1st

            
                Menu 2

            
        
        

            same using some contextual render fn

                            renderMenu={
                    ( e, allMenuComps ) => Menu 2 x:{ e.x } x:{ e.y }

                }/>
        

        
            Without parent's menu

                            root         // don't show parent's menu
                renderMenu={
                    ( e, allMenuComps ) => Menu x:{ e.x } x:{ e.y }

                }/>
        

        
            native menu

                            native         // use natve menu
            />
        

        

        

        

    
;
}
//...

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

![contributions welcome](#)

BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a

Paypal :

$3

MIT license