Skip to content

agjs/react-context-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-right-click-menu

Minimalistic provider built around native Contextmenu Event.

Unlike many similar libraries, react-right-click-menu simply provides a context environment, where consumer provides an actual DOM node (a reference) to an element that should trigger the menu and the component that should be rendered when the event occurs.

This makes it easy to intergrate your own UI library and show your own UI Components when a context menu is triggered. That being said, react-right-click-menu doesn't carry over any content or styling, nor it installs any additional dependencies.

Install

NPM

npm i @agjs/react-right-click-menu

YARN

yarn add @agjs/react-right-click-menu

Props

Props Description Default
trigger A react reference to an element that will trigger the menu on right click null
component A component to show when trigger is right clicked null
isOpenAfterInteraction Determines if a menu should remain open after user interacts with it. For instance, maybe you will render a list of checkboxes that user has to interact with, and you don't want menu to close it after each interaction (click) true
className A custom className in case you want to apply custom styling to the context wrapper null
isOpen Self-explanatory false
setIsOpen Self-explanatory -

Use

import React, { useRef, useState } from "react";
import ContextMenu from "@agjs/react-right-click-menu";
import SomeUiComponent from "somewhere";

export const ExampleComponent = () => {
  const [isMenuShown, setIsMenuShown] = useState(false);
  const ref = useRef();
  return (
    <>
      <ContextMenu
        isOpenAfterInteraction={false}
        trigger={ref}
        component={<SomeUiComponent />}
        isOpen={isMenuShown}
        setIsOpen={setIsMenuShown}
      />
      <div className="foo" ref={ref}>
        Once someone right-clicks inside of me, I will trigger some content!
      </div>
    </>
  );
};

Transitions

Example using react-motion

To keep the minimal footprint, react-right-click-menu doesn't apply any transitions to the component triggered. This decision was made in order to keep minimal amount of external dependencies and to allow a consumer to add them if they wish.

In the showcase below, we can see how we used a render-prop from react-motion to generate some inline-styles and pass them down to the ContextMenu.

import React, { useRef, useState } from "react";
import ContextMenu from "@agjs/react-right-click-menu";
import { Motion, spring } from "react-motion";
import ContextMenu from "./index";
import Foo from "somewhere";

export const ExampleComponent = () => {
  const [isMenuShown, setIsMenuShown] = useState(false);
  const ref = useRef();
  return (
    <>
      <Motion
        defaultStyle={{ opacity: 0 }}
        style={{
          opacity: !isMenuShown ? spring(0) : spring(1),
        }}
      >
        {(interpolatedStyle) => {
          return (
            <ContextMenu
              trigger={ref}
              component={<Foo />}
              isOpen={isMenuShown}
              setIsOpen={setIsMenuShown}
              style={{ opacity: interpolatedStyle.opacity }}
            />
          );
        }}
      </Motion>
      <div ref={ref} style={customStyles}>
        Right click inside of me!
      </div>
    </>
  );
};

About

React library for invoking the context menu.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published