Add long press support, improve styleguide CSS

Author: TimboKZ

docs/Readme.md

@@ -16,14 +16,7 @@ React Context Menu Wrapper
   </a>
 </div>
 
-This library provides a simple wrapper for your context menus. It handles user interaction on desktop and mobile
-devices, and guarantees correct context menu positioning.
-
-In an effort to stay unopinionated, this library does not provide any styling or additional components. It is up to you
-define your own styles and logic for the menu. This is useful when your CSS framework already provides dropdown menu
-styling (e.g. [Bulma](https://bulma.io/), [Bootstrap](https://getbootstrap.com/)) or when you need to implement some
-non-trivial logic for your context menu (e.g. [Ogma context menus](https://github.com/TimboKZ/Ogma) with tagging
-support).
+#### [View on Github](https://github.com/TimboKZ/react-context-menu-wrapper)
 
 > **Important:** React Context Menu Wrapper v3+ uses [React hooks](https://reactjs.org/docs/hooks-intro.html) and
 functional components. If your project does not support them, consider using v2 or below.
@@ -32,5 +25,3 @@ functional components. If your project does not support them, consider using v2
 
 > **Note:** You can view source code of all examples on this page - just click the "View Code" button below the 
 relevant example.
-
-#### [View on Github](https://github.com/TimboKZ/react-context-menu-wrapper)

docs/components/BasicGlobalMenu.js

@@ -1,35 +1,39 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ContextMenuWrapper } from 'react-context-menu-wrapper';
 
-const MyContextMenu = () => {
+const MyContextMenu = React.memo(() => {
     const [seconds, setSeconds] = useState(0);
     useEffect(() => {
-        const timer = setInterval(() => setSeconds(s => s + 1), 1000);
+        const timer = setInterval(() => setSeconds(s => s + 0.5), 500);
         return () => clearInterval(timer);
-    });
+    }, []);
 
     return (
         <div className="context-menu">
             <p>
-                I am a custom <strong>global</strong> context menu!
-            </p>
-            <p>
-                Open for {seconds} {seconds === 1 ? 'second' : 'seconds'}.
+                This is a <strong>global</strong> menu.
+                <div style={{ height: 10 }} />
+                Open for {seconds.toFixed(1)} {seconds === 1 ? 'second' : 'seconds'}.
             </p>
+            <button>Dummy button #1</button>
+            <button>Dummy button #2</button>
         </div>
     );
-};
+});
 
-const GlobalMenuExample = () => {
+const GlobalMenuExamplePage = React.memo(() => {
     const [globalMenuEnabled, setGlobalMenuEnabled] = useState(true);
     const onClick = useCallback(() => setGlobalMenuEnabled(!globalMenuEnabled), [globalMenuEnabled]);
 
-    const status = globalMenuEnabled ? 'ENABLED' : 'DISABLED';
+    const currentMenuType = globalMenuEnabled ? 'custom' : "Browser's default";
+    const currentMenuTypeStyle = { color: globalMenuEnabled ? 'red' : 'green' };
     const action = globalMenuEnabled ? 'Disable' : 'Enable';
 
     return (
         <React.Fragment>
-            <p className="text">Custom global context menu status: {status}</p>
+            <p className="text">
+                Currently using <span style={currentMenuTypeStyle}>{currentMenuType}</span> global context menu.
+            </p>
             <button className="button" onClick={onClick}>
                 {action} custom global context menu
             </button>
@@ -41,6 +45,6 @@ const GlobalMenuExample = () => {
             )}
         </React.Fragment>
     );
-};
+});
 
-export default GlobalMenuExample;
+export default GlobalMenuExamplePage;

docs/components/BasicLocalMenu.js

@@ -1,28 +1,35 @@
 import React, { useRef } from 'react';
 import { ContextMenuWrapper, useContextMenuHandlers } from 'react-context-menu-wrapper';
 
-const LocalMenuExample = () => {
-    const menuId = 'my-component-local-menu';
-    const bannerRef = useRef();
+const menuId = 'my-component-local-menu';
 
-    // This hook attaches relevant DOM event listeners to `bannerRef`.
+const MyContextMenuTrigger = React.memo(() => {
+    const bannerRef = useRef();
     useContextMenuHandlers(bannerRef, { id: menuId });
 
+    return (
+        <div ref={bannerRef} className="banner">
+            Right click or long-press this box
+        </div>
+    );
+});
+
+const LocalMenuExample = React.memo(() => {
     return (
         <React.Fragment>
-            <div ref={bannerRef} className="banner">
-                Right click or long-press this box
-            </div>
+            <MyContextMenuTrigger />
 
             <ContextMenuWrapper id={menuId}>
                 <div className="context-menu" style={{ backgroundColor: '#d6fffc' }}>
                     <p>
-                        I am <strong>component-local</strong> context menu!
+                        This is a <strong>local</strong> menu!
                     </p>
+                    <button>Dummy button #1</button>
+                    <button>Dummy button #2</button>
                 </div>
             </ContextMenuWrapper>
         </React.Fragment>
     );
-};
+});
 
 export default LocalMenuExample;

docs/components/SharedMenu.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { ContextMenuWrapper, useContextMenuEvent, useContextMenuHandlers } from 'react-context-menu-wrapper';
 
-const MyContextMenu = ({ selection, toggleSelection }) => {
+const MyContextMenu = React.memo(({ selection, toggleSelection }) => {
     const menuEvent = useContextMenuEvent();
     if (!menuEvent) return null;
 
@@ -14,9 +14,9 @@ const MyContextMenu = ({ selection, toggleSelection }) => {
             <button onClick={onClick}>Toggle state</button>
         </div>
     );
-};
+});
 
-const Box = ({ name, selected, menuId }) => {
+const Box = React.memo(({ name, selected, menuId }) => {
     const boxRef = useRef();
     useContextMenuHandlers(boxRef, { id: menuId, data: name });
 
@@ -29,9 +29,9 @@ const Box = ({ name, selected, menuId }) => {
             <span>{text}</span>
         </div>
     );
-};
+});
 
-const SharedMenu = () => {
+const SharedMenu = React.memo(() => {
     const [selection, setSelection] = useState({});
     const toggleSelection = useCallback(
         name => {
@@ -54,6 +54,6 @@ const SharedMenu = () => {
             </ContextMenuWrapper>
         </div>
     );
-};
+});
 
 export default SharedMenu;

docs/markdown/0-Introduction.md

@@ -0,0 +1,18 @@
+This library provides a simple wrapper for your context menus. It handles user interaction on desktop and mobile
+devices, and guarantees correct context menu positioning.
+
+In an effort to stay unopinionated, this library does not provide any styling or additional components. It is up to you
+define your own styles and logic for the menu. This is useful when your CSS framework already provides dropdown menu
+styling (e.g. [Bulma](https://bulma.io/), [Bootstrap](https://getbootstrap.com/)) or when you need to implement some
+non-trivial logic for your context menu (e.g. [Ogma context menus](https://github.com/TimboKZ/Ogma) with tagging
+support).
+
+**Features:**
+* Supports global and component-local context menus.
+* Supports long-press for mobile devices.
+* Lets you trigger context menus programmatically.  
+* Lets you define context menu precedence.
+* Correctly displays context menus on nested components.
+* Correctly displays context menus near the borders of the window.
+* **Uses hooks!**
+* **Does not provide out-of-the-box styling.**

docs/markdown/1-Installation.md

@@ -1,10 +1,23 @@
-Add React context menu wrapper to your project:
-
+Add [`react-context-menu-wrapper`](https://www.npmjs.com/package/react-context-menu-wrapper) to your NPM project:
 ```bash
 npm install --save react-context-menu-wrapper
 ```
 
-Now you can import it as any other React library:
+Then import it as usual:
 ```js
 import {ContextMenuWrapper, useContextMenuHandlers} from 'react-context-menu-wrapper';
 ```
+
+> **Before we start:** On mobile, the long press gesture can accidentally start the text selection process. To prevent
+> this, you can copy the CSS snippet shown below into your stylesheet and add `.no-select` class to your context menu
+> and relevant trigger components. For best user experience, make sure you only add this class on mobile devices and 
+> that affected components are relatively small (e.g. don't add `.no-select` to the root component of your page).
+```css
+.no-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+```

docs/markdown/2-Basic-menus.md

@@ -0,0 +1,28 @@
+A quick demo first: **Right click anywhere on this page to bring up a custom global context menu.** On mobile devices,
+long-press gesture should bring up the menu too.
+
+Defining a global context menu is very straightforward - you need to create a `<ContextMenuWrapper>` component and set
+its `global` property to `true`. For example:
+```jsx
+import React from 'react';
+import { ContextMenuWrapper } from 'react-context-menu-wrapper';
+
+export const GlobalMenuExample = () => {
+    return (
+        <ContextMenuWrapper global={true}>
+            <div className="context-menu">
+                <p>I am a global context menu!</p>
+            </div>
+        </ContextMenuWrapper>
+    );
+};
+```
+
+Your custom global menu will replace your browser's default context menu. If you want to enable the default context menu
+again, just unmount the `<ContextMenuWrapper>` component.
+
+**Remember** that `react-context-menu-wrapper` does not provide any styling out of the box, so you will need to define
+your own styles. If you're interested, the styles used for this demo are shown at the bottom of the page.
+
+```js { "componentPath": "../components/BasicGlobalMenu.js" }
+```

docs/markdown/2-Global-menu.md

@@ -0,0 +1,33 @@
+Local menus 
+
+Unlike global context menus, local menus do **not** replace your Browser's default context menu. Instead, local menus
+are attached to specific components. For example, you + 
+
+```jsx
+import React, { useRef } from 'react';
+import { ContextMenuWrapper, useContextMenuHandlers } from 'react-context-menu-wrapper';
+
+export const LocalMenuExample = () => {
+    const menuId = 'my-component-local-menu';
+    const bannerRef = useRef();
+
+    // This hook attaches relevant DOM event listeners to `bannerRef`.
+    useContextMenuHandlers(bannerRef, { id: menuId });
+
+    return (
+        <React.Fragment>
+            {/* We attach `bannerRef` to the component that will trigger the context menu: */}
+            <div ref={bannerRef} className="banner">Right click or long-press this box</div>
+
+            <ContextMenuWrapper id={menuId}>
+                <div className="context-menu">
+                    <p>I am component-local context menu!</p>
+                </div>
+            </ContextMenuWrapper>
+        </React.Fragment>
+    );
+};
+```
+
+```js { "componentPath": "../components/BasicLocalMenu.js" }
+```