menu

Simple Context menu component for react showing all parent's node menus

Aug 21, 2019
Simple Context menu component for react showing all parent's node menus

react-inheritable-contextmenu

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Simple-Context-menu

View Demo View Github

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

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

GitHub

Recommended