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

Overview

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

Usage

.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
Menu root
Root contextual menu available here


another one which inherit the 1st
Menu 2
same using some contextual render fn
Menu 2 x:{ e.x } x:{ e.y }
}/>
Without parent's menu
Menu x:{ e.x } x:{ e.y }
}/>
native menu



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

//...

License ?

MIT license

You might also like...
A react component that displays an unlimited deep menu
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

Animated hamburger menu icons for React (1.5 KB) 🍔

‌ ‌ Animated hamburger menu icons for React Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as po

React Dropdown Menu

React Dropdown Menu

Hamburger Menu React JS Using Third Party Package ReactJS - Popup
Hamburger Menu React JS Using Third Party Package ReactJS - Popup

In this project, let's build a Hamburger Menu app by applying the concepts we have learned till now. Refer to the image below: Design Files Click to v

React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Radial Menu for FiveM,built with React
Radial Menu for FiveM,built with React

BCS Radial Menu This project is to freshen up the options for free radial menu f

🍪 A stylized command menu for React.
🍪 A stylized command menu for React.

🚧 Superkey is under development and is not ready for production. If you have any bugs or problems please create an issue. 🚧 Website (working 😊 ) •

Smart data-driven menu rendered in an overlay
Smart data-driven menu rendered in an overlay

React Data Menu Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other compon

React dismissable context and hook with layers (nesting) support
React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

Owner
Nathan Braun
Nathan Braun
Left navigation menu. Get data from JSON file and display simple form menu.

Left Navbar Menu Left navigation menu. Get data from JSON file and display simple form menu. User Interface created using React and Typescript. App st

Wojtek 5 May 24, 2021
A simple Hook for creating fully accessible dropdown menus in React

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

Sparksuite 109 Sep 27, 2022
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

Fadi Khadra 844 Nov 24, 2022
📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀

React Native Hold Menu A performant, easy to use hold to open context menu for React Native powered by Reanimated. ?? This package is experimental and

Enes 1k Nov 21, 2022
:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage <OffCanvas width={300} transition

Vu Tran 38 Nov 10, 2022
A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

innFactory 140 Nov 16, 2022
Tiny react library for building tooltips, flyovers, menus and more

Postel ?? Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers – any type of UI which would make sens

Tim 76 Aug 9, 2022
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus

React Pro Sidebar Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus Demo Live preview Scre

Mohamed Azouaoui 884 Nov 19, 2022
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

Huang-Ming Chang 119 Nov 7, 2022
A simple sliding side menu component for React

Cheeseburger Menu A simple sliding side menu component for React. This component provides the sliding menu only, not the hamburger button. For your bu

Eddie McLean 19 May 27, 2022