Skip to content

Simple Context menu component for react showing all parent's node menus in theirs contexts.

License

Notifications You must be signed in to change notification settings

n8tz/react-inheritable-context-menu

Repository files navigation

react-inheritable-contextmenu

Samples

Build Status

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?

contributions welcome

BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a
Paypal : PayPal donate button

License ?

MIT license

About

Simple Context menu component for react showing all parent's node menus in theirs contexts.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published