React Contexify

https://fkhadra.github.io/react-contexify/
Admin
React Contexify is a React library for building customizable context menus with keyboard navigation,...
Tokens:12,298
Snippets:102
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Basic React-Contexify Implementation

Source: https://fkhadra.github.io/react-contexify/quick-start

This example demonstrates the basic setup for React-Contexify, including importing necessary components, defining a menu ID, using the useContextMenu hook, and rendering a menu with items. It shows how to display the menu on right-click events.

```javascript
import {
  Menu,
  Item,
  Separator,
  Submenu,
  useContextMenu
} from "react-contexify";

import "react-contexify/dist/ReactContexify.css";

const MENU_ID = "menu-id";

export default function App() {
  // 🔥 you can use this hook from everywhere. All you need is the menu id
  const { show } = useContextMenu({
    id: MENU_ID
  });
   
  function handleItemClick({ event, props, triggerEvent, data }){
    console.log(event, props, triggerEvent, data );
  }
  
  function displayMenu(e){
    // put whatever custom logic you need
    // you can even decide to not display the Menu
    show({
      event: e,
    });
  }
  
  return (
    <div>
      {/* just display the menu on right click */}
      <div onContextMenu={show}>
        Right click inside the box
      </div>
      {/* run custom logic then display the menu */}
      <div onContextMenu={displayMenu}>
        Right click inside the box
      </div>


      <Menu id={MENU_ID}>
        <Item onClick={handleItemClick}>
          Item 1
        </Item>
        <Item onClick={handleItemClick}>
          Item 2
        </Item>
        <Separator />
        <Item disabled>Disabled</Item>
        <Separator />
        <Submenu label="Submenu">
          <Item onClick={handleItemClick}>
            Sub Item 1
          </Item>
          <Item onClick={handleItemClick}>Sub Item 2</Item>
        </Submenu>
      </Menu>
    </div>
  );
}

```

--------------------------------

### Install React-Contexify with Yarn

Source: https://fkhadra.github.io/react-contexify/quick-start

Use this command to install the react-contexify package using Yarn.

```bash
yarn add react-contexify  
```

--------------------------------

### Install React-Contexify with npm

Source: https://fkhadra.github.io/react-contexify/quick-start

Use this command to install the react-contexify package using npm.

```bash
npm install --save react-contexify  
```

--------------------------------

### Using Separator in a Menu

Source: https://fkhadra.github.io/react-contexify/api/separator

Demonstrates how to import and use the Menu, Item, and Separator components to create a context menu with distinct sections. Ensure 'react-contexify' is installed.

```javascript
import { Menu, Item, Separator } from 'react-contexify';  
  
<Menu id="menuId">  
  <Item>item 1</Item>  
  <Separator />  
  <Item>item 2</Item>  
</Menu>  
```

--------------------------------

### Handle Item Click with TypeScript

Source: https://fkhadra.github.io/react-contexify/handle-item-click

Illustrates handling item clicks in TypeScript, utilizing type interfaces for enhanced safety and clarity. This example shows how to define types for props and data passed to menu items.

```typescript
import {  
  useContextMenu,  
  Menu,  
  Item,  
  Separator,  
  ItemParams,  
} from "react-contexify";  
  
// I really used that emoji for my menu id 🤣  
const MENU_ID = "💩";  
  
// Define an interface for the props that I'll pass to the Item  
interface ItemProps {  
  key: string;  
}  
  
// Defined just for documentation purpose  
type ItemData = any;  
  
export function Demo() {  
  const { show } = useContextMenu({  
    id: MENU_ID,  
  });  
  
  function displayMenu(e: React.MouseEvent) {  
    // pass the item id so the `onClick` on the `Item` has access to it  
    show({event: e, props: { key: "some value" } });  
  }  
  
  function handleItemClick({  
    id,  
    event,  
    props,  
    data,  
    triggerEvent,  
  }: ItemParams<ItemProps, ItemData>) {  
    // ⚠️ data and triggerEvent are not used. I've just added them so we have the full list of parameters  
  
    // I use the id attribute defined on the `Item` to identify which one is it  
    // this feel natural to my brain  
    switch (id) {  
      case "remove":  
        // logic to remove the row  
        break;  
      case "share":  
        // logic to share  
        break;  
      case "email":  
        //logic to send email  
        break;  
      case "sponsor":  
        //logic to open sponsor page  
        break;  
    }  
  }  
  
  return (  
    <div>  
      <ul>  
        {items.map((item) => (  
          <li id={`${item.id}`} key={item.id} onContextMenu={displayMenu}>  
            {/* render content of my list item */}  
          </li>  
        ))}  
      </ul>  
      <Menu id={MENU_ID}>  
        <Item id="remove" onClick={handleItemClick}>  
          Remove row  
        </Item>  
        <Separator />  
        <Item id="share" onClick={handleItemClick}>  
          Share  
        </Item>  
        <Item  
          id="email"  
          onClick={handleItemClick}  
          className={styles.itemContent}  
        >  
          Send email  
        </Item>  
        <Item id="sponsor" onClick={handleItemClick}>  

```

--------------------------------

### Render the Menu Component

Source: https://fkhadra.github.io/react-contexify/quick-start

Render the Menu component with its mandatory 'id' prop. The menu is only added to the DOM when it is visible. This example shows how to structure menu items, including disabled items and submenus.

```javascript
<Menu id={MENU_ID}>
  <Item onClick={handleItemClick}>Item 1</Item>
  <Item onClick={handleItemClick}>Item 2</Item>
  <Separator />
  <Item disabled>Disabled</Item>
  <Separator />
  <Submenu label="Submenu">
    <Item onClick={handleItemClick}>Sub Item 1</Item>
    <Item onClick={handleItemClick}>Sub Item 2</Item>
  </Submenu>
</Menu>

```

--------------------------------

### Implement BooleanPredicate for Item state

Source: https://fkhadra.github.io/react-contexify/api/item

Defines the BooleanPredicate type for conditional disabling or hiding of items and provides examples for both static and dynamic predicate usage.

```typescript
interface HandlerParams<Props = any, Data = any> {  
  /**  
   * The event that triggered the context menu  
   */  
  triggerEvent: DomEvent;  
  
  /**  
   * Any props supplied when triggering the menu  
   */  
  props?: Props;  
  
  /**  
   * Data object provided to item  
   */  
  data?: Data;  
}  
  
type BooleanPredicate = boolean | ((args: HandlerParams) => boolean);  
  
  
<Item disabled={true}>An item</Item>  
  
function isItemDisabled({   
  triggerEvent,  
  props,  
  data  
  }: PredicateParams<type of props, type of data>){  
  return boolean;  
}  
  
<Item disabled={isItemDisabled} data={data}>item content</Item>  
  
<Item hidden={true}>hidden</Item>  
  
function isItemHidden({   
  triggerEvent,  
  props,  
  data  
  }: PredicateParams<type of props, type of data>){  
  return boolean;  
}  
  
<Item hidden={isItemHidden}>hidden</Item>
```

--------------------------------

### show Method

Source: https://fkhadra.github.io/react-contexify/api/use-context-menu

The `show` method displays a context menu. It accepts an event object and can be configured with an ID, custom props, and a specific position.

```APIDOC
## show Method

### Description
Displays a context menu at a specified location or based on a DOM event.

### Parameters
#### `show` Method Parameters
- **event** (DOM event) - Required - The event used to display the menu.
- **id** (string) - Optional - Unique ID to identify the menu. Can be overridden on each call.
- **props** (any) - Optional - Passed to the `Item` onClick callback. Override props defined during initialization if any.
- **position** ({ x: number, y: number }) - Optional - Use a custom position for the `Menu`.

### Request Examples

#### Basic Usage
```javascript
import { useContextMenu } from 'react-contexify';

const { show, hideAll } = useContextMenu({
  id: "menuId",
  props: {
    key: "value"
  }
});

function displayMenu(e: React.MouseEvent) {
  show({
    event: e
  });
}
```

#### Multiple Menu Handling
```javascript
import { useContextMenu } from 'react-contexify';

const { show, hideAll } = useContextMenu({
  id: "menuId",
  props: {
    key: "value"
  }
});

function displayMenu(e: React.MouseEvent) {
  show({
    event: e,
    id: "another-menu-id"
  });
}
```

#### Custom Position
```javascript
import { useContextMenu } from 'react-contexify';

const { show, hideAll } = useContextMenu({
  id: "menuId",
  props: {
    key: "value"
  }
});

function displayMenu(e: React.MouseEvent) {
  show({
    event: e,
    position: {
      x: 100,
      y: 200
    }
  });
}
```

#### Pass Props
```javascript
import { useContextMenu } from 'react-contexify';

const { show, hideAll } = useContextMenu({
  id: "menuId",
  props: {
    key: "value"
  }
});

function displayMenu(e: React.MouseEvent) {
  show({
    event: e,
    props: {
      key: "value1",
      foo: false
    }
  });
}
```
```

--------------------------------

### Display context menu with show method

Source: https://fkhadra.github.io/react-contexify/api/use-context-menu

Triggers the context menu display using various configurations like custom positions, IDs, or props.

```javascript
import { useContextMenu } from 'react-contexify';  
  
const { show, hideAll } = useContextMenu({   
  id: "menuId",  
  props: {  
    key: "value"  
  }  
});  
  
// basic usage  
function displayMenu(e: React.MouseEvent) {  
  show({  
    event: e  
  })  
}  
  
// multiple menu handling  
function displayMenu(e: React.MouseEvent) {  
  show({  
    event: e,  
    id: "another-menu-id"  
  })  
}  
  
// custom position  
function displayMenu(e: React.MouseEvent) {  
  show({  
    event: e,  
    position: {  
      x: 100,  
      y: 200  
    }  
  })  
}  
  
// pass props  
function displayMenu(e: React.MouseEvent) {  
  show({  
    event: e,  
    props: {  
      key: "value1",  
      foo: false  
    }  
  })  
}
```

--------------------------------

### Basic Menu Structure with Items and Submenu

Source: https://fkhadra.github.io/react-contexify/api/submenu

Demonstrates the fundamental structure of a menu with items and a nested submenu. Ensure 'react-contexify' is imported.

```jsx
import { Menu, Submenu, Item } from "react-contexify";

<Menu 
  id="anId" 
>
  <Item>item 1</Item>
  <Item>item 2</Item>
  <Submenu labe="a submenu" arrow="🚀">
    <Item>item 1</Item>
    <Item>item 2</Item>
  </Submenu>
</Menu>
```

--------------------------------

### Create Custom Themes

Source: https://fkhadra.github.io/react-contexify/how-to-style

Define a custom theme by targeting the generated .contexify_theme-{YOUR_THEME} class.

```css
.contexify_theme-dark {  
  --contexify-menu-bgColor: rgba(40, 40, 40, 0.98);  
  --contexify-separator-color: #4c4c4c;  
  --contexify-item-color: #fff;  
}  
```

--------------------------------

### Import React-Contexify Components and Styles

Source: https://fkhadra.github.io/react-contexify/quick-start

Import the necessary components (Menu, Item, Separator, Submenu) and the stylesheet for React-Contexify. This is the first step in setting up a context menu.

```javascript
import {
  Menu,
  Item,
  Separator,
  Submenu,
  useContextMenu,
} from "react-contexify";
import "react-contexify/dist/ReactContexify.css";

```

--------------------------------

### Initialize Multiple Menus with IDs

Source: https://fkhadra.github.io/react-contexify/handling-multiple-menu

When using multiple menus, initialize each with a unique ID. This approach is straightforward but can become verbose if managing many menus.

```javascript
import { useContextMenu } from "react-contexify";  
  
function App() {  
  const { show: showMenu1 } = useContextMenu({  
    id: "menu1",  
  });  
  
  const { show: showMenu2 } = useContextMenu({  
    id: "menu2",  
  });  
  
  // etc...  
}
```

--------------------------------

### Menu Component Usage

Source: https://fkhadra.github.io/react-contexify/api/menu

Demonstrates the basic usage of the Menu component with its essential props and nested Item components.

```APIDOC
## Menu Component

### Description

The Menu component is used to render a context menu. It requires an `id` and can accept various props to customize its appearance and behavior.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```javascript
import { Menu, Item } from "react-contexify";

<Menu 
  id="anId"
  theme="dark"
  animation="scale"
>
  <Item>item 1</Item>
  <Item>item 2</Item>
  {/* etc... */}
</Menu>
```

### Response

N/A (Component Usage)

### Props

#### Menu Props

- **id** (string) - Required - Unique id to identify the menu.
- **children** (ReactNode) - Required - Any valid node which can be rendered.
- **theme** (string) - Optional - Theme is appended to `contexify_theme-${given theme}`.
- **animation** (string) - Optional - Animation appended to `contexify_willEnter-${given animation}` and `contexify_willLeave-${given animation}`. Default: `scale`.
- **onShown** (() => void) - Optional - Invoked after the menu appeared.
- **onHidden** (() => void) - Optional - Invoked after the menu has been hidden.
- **any HTML Attribute** (HTMLAttribute) - Optional - Any valid HTML attribute.
```

--------------------------------

### Display Context Menu with Basic Usage

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Use this to display a context menu with a specified ID and the triggering event. Ensure the 'react-contexify' library is imported.

```javascript
import { contextMenu } from 'react-contexify';

// basic usage
function displayMenu(e: React.MouseEvent) {
  contextMenu({
    id: "menuId",
    event: e,
  })
}
```

--------------------------------

### Display Another Context Menu

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Demonstrates displaying a different context menu by using a unique ID. This is useful for managing multiple distinct menus.

```javascript
import { contextMenu } from 'react-contexify';

// multiple menu handling
function displayMenu(e: React.MouseEvent) {
  contextMenu({
    id: "another-menu",
    event: e,
  })
}
```

--------------------------------

### Configure Menu Animations

Source: https://fkhadra.github.io/react-contexify/how-to-style

Apply different animation styles to the menu using the animation prop.

```javascript
import { Menu, Item, animation } from 'contexify';  
  
function FadeMenu(){  
  return (  
    <Menu id="menuId" animation="fade">  
      <Item>Item 1</Item>   
      <Item>Item 2</Item>   
    </Menu>  
  )  
}  
  
function FlipMenu(){  
  return (  
    <Menu id="menuId" animation="flip">  
      <Item>Item 1</Item>   
      <Item>Item 2</Item>   
    </Menu>  
  )  
}  
  
function ScaleMenu(){  
  return (  
    <Menu id="menuId" animation="scale">  
    {/* Same as not setting animation */}  
      <Item>Item 1</Item>   
      <Item>Item 2</Item>   
    </Menu>  
  )  
}  
  
function SlideMenu(){  
  return (  
    <Menu id="menuId" animation="slide">  
      <Item>Item 1</Item>   
      <Item>Item 2</Item>   
    </Menu>  
  )  
}  
```

--------------------------------

### Basic Menu Implementation

Source: https://fkhadra.github.io/react-contexify/api/menu

Standard usage of the Menu component with required id and optional theme and animation props.

```javascript
import { Menu, Item } from "react-contexify";  
  
<Menu   
  id="anId"  
  theme="dark"  
  animation="scale"  
>  
  <Item>item 1</Item>  
  <Item>item 2</Item>  
  {/* etc... */}  
</Menu>
```

--------------------------------

### Triggering a menu with contextMenu

Source: https://fkhadra.github.io/react-contexify/trigger-the-menu-outside-of-react-compoent

Use the contextMenu.show method to display a menu programmatically. Requires the menuId and the event object.

```javascript
import { contextMenu } from 'react-contexify';  
  
  
function somewhere(e){  
  contextMenu.show({  
    id: menuId,  
    event: e  
  });  
}  
  

```

--------------------------------

### Update useContextMenu show method

Source: https://fkhadra.github.io/react-contexify/migrate

The show method now accepts a single object parameter containing event and props.

```javascript
const {show} = useContextMenu({id: "menuId"})  
  
// ⛔️ Before  
show(e, {props: {}})  
  
// ✅ Now  
show({ event: e, props: {}})
```

--------------------------------

### Menu Component with HTML Attributes

Source: https://fkhadra.github.io/react-contexify/api/menu

Illustrates how to apply standard HTML attributes like `data-test`, `className`, and `style` to the Menu component.

```APIDOC
## Menu Component with HTML Attributes

### Description

The Menu component supports any valid HTML attribute, allowing for further customization through CSS classes, inline styles, and data attributes.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```javascript
<Menu 
  id="anId"
  data-test="item-1"
  className="a-css-class"
  style={{ color: "purple" }}
>
  <Item>item 1</Item>
  <Item>item 2</Item>
  {/* etc... */}
</Menu>
```

### Response

N/A (Component Usage)
```

--------------------------------

### Apply Built-in Themes

Source: https://fkhadra.github.io/react-contexify/how-to-style

Use the theme prop to switch between light and dark built-in themes.

```javascript
import { Menu, Item } from 'contexify';  
  
  
function LightMenu(){  
  return (  
    <Menu id="menuId" theme="light">  
      <Item>Item 1</Item>   
      <Item>Item 2</Item>   
      <Item>Item 3</Item>   
    </Menu>  
  )  
}  
  
function DarkMenu(){  
  return (  
    <Menu id="menuId" theme="dark">  
      <Item>Item 1</Item>   
      <Item>Item 2</Item>   
      <Item>Item 3</Item>   
    </Menu>  
  )  
}  
```

--------------------------------

### contextMenu.show

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Displays a specific context menu identified by its ID.

```APIDOC
## contextMenu.show

### Description
Displays the context menu associated with the provided ID at the specified event location or custom coordinates.

### Parameters
#### Request Body
- **id** (string | number) - Required - Unique id to identify the menu
- **event** (DOM event) - Required - The event used to display the menu
- **props** (any) - Optional - Passed to the Item onClick callback. Override props defined during initialization if any
- **position** ({ x: number, y: number }) - Optional - Use a custom position for the Menu

### Request Example
{
  "id": "menuId",
  "event": event,
  "position": { "x": 100, "y": 200 }
}
```

--------------------------------

### Render Menu with React Portal

Source: https://fkhadra.github.io/react-contexify/usage-with-portal

Wraps a component in a portal to render it into a specific DOM element identified by a selector.

```javascript
import { createPortal } from 'react-dom';  
import { MyMenu } from "./somwhere";  
  
function Portal({children}){  
  return createPortal(children, document.querySelector("#my-node"));  
}  
  
function MyApp(){  
  
  return (  
    <main>  
    <Portal>  
      <MyMenu />  
    </Portal>  
    </main>  
  )  
}  
```

--------------------------------

### Initialize useContextMenu hook

Source: https://fkhadra.github.io/react-contexify/api/use-context-menu

Initializes the hook with an optional menu ID and default props.

```javascript
import { useContextMenu } from 'react-contexify';  
  
const { show, hideAll } = useContextMenu({   
  id: "menuId",  
  props: {  
    key: "value"  
  }  
});
```

--------------------------------

### Handle Item Click in JavaScript

Source: https://fkhadra.github.io/react-contexify/handle-item-click

Demonstrates handling item clicks using a switch statement based on the item's ID. This approach is suitable for managing multiple distinct actions triggered by different menu items.

```javascript
import { useContextMenu, Menu, Item, Separator } from "react-contexify";  
  
const MENU_ID = "💩";  
  
export function Demo() {  
  const { show } = useContextMenu({  
    id: MENU_ID,  
  });  
  
  function displayMenu(e) {  
    show({event: e, props: { key: "value" }});  
  }  
  
  function handleItemClick({ id, props, data, triggerEvent }) {  
    // ⚠️ data and triggerEvent are not used. I've just added them so we have the full list of parameters  
  
    // I use the id attribute defined on the `Item` to identify which one is it  
    // this feel natural to my brain  
    switch (id) {  
      case "remove":  
        // logic to remove the row  
        break;  
      case "share":  
        // logic to share  
        break;  
      case "email":  
        //logic to send email  
        break;  
      case "sponsor":  
        //logic to open sponsor page  
        break;  
    }  
  }  
  
  return (  
    <div>  
      <ul>  
        {items.map((item) => (  
          <li id={`${item.id}`} key={item.id} onContextMenu={displayMenu}>  
            {/* render content of my list item */}  
          </li>  
        ))}  
      </ul>  
      <Menu id={MENU_ID}>  
        <Item id="remove" onClick={handleItemClick}>  
          Remove row  
        </Item>  
        <Separator />  
        <Item id="share" onClick={handleItemClick}>  
          Share  
        </Item>  
        <Item  
          id="email"  
          onClick={handleItemClick}  
          className={styles.itemContent}  
        >  
          Send email  
        </Item>  
        <Item id="sponsor" onClick={handleItemClick}>  
          Sponsor my work  
        </Item>  
      </Menu>  
    </div>  
  );  
}  
```

--------------------------------

### useContextMenu Hook Initialization

Source: https://fkhadra.github.io/react-contexify/api/use-context-menu

Initializes the `useContextMenu` hook, returning methods to control context menus. You can specify a unique ID and default props.

```APIDOC
## useContextMenu Hook

### Description
The `useContextMenu` hook provides methods to interact with context menus.

### Methods
- `show`: Displays a context menu.
- `hideAll`: Hides all currently displayed context menus.

### Parameters
#### Initialization Parameters
- **id** (string) - Optional - Unique ID to identify the menu. Can be overridden on each call.
- **props** (any) - Optional - Passed to the `Item` onClick callback. Can be overridden on each call.

### Request Example
```javascript
import { useContextMenu } from 'react-contexify';

const { show, hideAll } = useContextMenu({
  id: "menuId",
  props: {
    key: "value"
  }
});
```
```

--------------------------------

### Configure Menu Animations

Source: https://fkhadra.github.io/react-contexify/how-to-style

Control enter and exit animations by passing an object to the animation prop.

```jsx
<Menu animation={{ enter: false, exit: "fade" }}>  
```

```jsx
<Menu animation={{ enter: "fade", exit: "flip" }}>  
```

--------------------------------

### Menu with HTML Attributes

Source: https://fkhadra.github.io/react-contexify/api/menu

Demonstrates passing standard HTML attributes like data-test, className, and style to the Menu component.

```javascript
<Menu   
  id="anId"  
  data-test="item-1"  
  className="a-css-class"  
  style={{ color: "purple" }}  
>  
  <Item>item 1</Item>  
  <Item>item 2</Item>  
  {/* etc... */}  
</Menu>
```

--------------------------------

### Render custom icons and images in Menu Items

Source: https://fkhadra.github.io/react-contexify/render-anything

Demonstrates how to include SVG components, images, and font icons inside the Item component.

```jsx
import { MySvgIcon } from "path-to-my-svg";  
  
<Menu id="menuId">  
  <Item>  
    <MySvgIcon>  
    <span>Item 1</span>  
  </Item>  
  <Separator />  
  <Item>  
    <img src="path to your image" />  
    <span>Item 2</span>  
  </Item>  
  <Item>  
    <span className="material-icons">  
      delete  
    </span>  
    <span>  
      Item 3  
    <span>  
  </Item>  
</Menu>
```

--------------------------------

### Initialize useContextMenu Hook

Source: https://fkhadra.github.io/react-contexify/quick-start

Initialize the useContextMenu hook with the menu ID. This hook provides the 'show' function to display the context menu. The 'show' function can be called directly on events or after custom logic within a handler function.

```javascript
const { show } = useContextMenu({
    id: MENU_ID
});

function displayMenu(e){
  // put whatever custom logic you need
  // you can even decide to not display the Menu
  show({
    event: e,
  });
}

// later when we render

{/* just display the menu on right click */}
<div onContextMenu={show}>
  Right click inside the box
</div>
{/* run custom logic then display the menu */}
<div onContextMenu={displayMenu}>
  Right click inside the box
</div>

```

--------------------------------

### Define Custom CSS Animations

Source: https://fkhadra.github.io/react-contexify/how-to-style

Create custom animations by defining keyframes and targeting the .contexify_willEnter and .contexify_willLeave classes.

```css
@keyframes contexify_scaleIn {  
  from {  
    opacity: 0;  
    transform: scale3d(0.3, 0.3, 0.3);  
  }  
  to {  
    opacity: 1;  
  }  
}  
@keyframes contexify_scaleOut {  
  from {  
    opacity: 1;  
  }  
  to {  
    opacity: 0;  
    transform: scale3d(0.3, 0.3, 0.3);  
  }  
}  
.contexify_willEnter-scale {  
  transform-origin: top left;  
  animation: contexify__scaleIn 0.3s;  
}  
  
.contexify_willLeave-scale {  
  transform-origin: top left;  
  animation: contexify__scaleOut 0.3s;  
}  
```

--------------------------------

### Implement onVisibilityChange callback

Source: https://fkhadra.github.io/react-contexify/migrate

Replaces the removed onShow and onHidden callbacks with a single visibility change handler.

```javascript
  
const handleVisibilityChange = (isVisible: boolean) => {  
  console.log(isVisible)  
}  
  
<Menu id="menuId" onVisibilityChange={handleVisibilityChange}>  
  <Item>Item 1</Item>  
</Menu>
```

--------------------------------

### Match Keyboard Shortcut

Source: https://fkhadra.github.io/react-contexify/add-keyboard-shortcut

Use the `keyMatcher` callback to define custom keyboard shortcuts. The callback receives the keyboard event and should return true when the shortcut is matched to trigger the `onClick` event.

```typescript
const matchShortcut = (e: KeyboardEvent): boolean => {
  return e.metaKey && e.key === 'f'
}
```

--------------------------------

### BooleanPredicate and HandlerParams

Source: https://fkhadra.github.io/react-contexify/api/submenu

Explanation of how to use conditional logic for disabled and hidden states.

```APIDOC
## BooleanPredicate

### Description
BooleanPredicate allows for dynamic control over the disabled or hidden state of a Submenu using a boolean or a function.

### HandlerParams
- **triggerEvent** (DomEvent) - The event that triggered the context menu.
- **props** (any) - Any props supplied when triggering the menu.
- **data** (any) - Data object provided to item.

### Usage Example
function isDisabled({ triggerEvent, props, data }) {
  return boolean;
}

<Submenu label="a submenu" disabled={isDisabled}>
  <Item>Item 1</Item>
</Submenu>
```

--------------------------------

### Item Component Props

Source: https://fkhadra.github.io/react-contexify/api/item

Configuration options for the Item component.

```APIDOC
## Item Component Props

### Parameters
- **children** (ReactNode) - Required - Any valid node which can be rendered
- **data** (any) - Optional - Passed to the Item onClick callback
- **onClick** (ItemHandler) - Optional - Callback when the current Item is clicked
- **disabled** (BooleanPredicate) - Optional - Disable Item. If a function is used, a boolean must be returned
- **hidden** (BooleanPredicate) - Optional - Hide Item. If a function is used, a boolean must be returned
- **any HTML Attribute** (HTMLAttribute) - Optional - Any valid HTML attribute
```

--------------------------------

### Apply HTML attributes to Item

Source: https://fkhadra.github.io/react-contexify/api/item

Demonstrates passing standard HTML attributes like id, data-test, className, and style to the Item component.

```jsx
<Item   
  id="anId"  
  data-test="item-1"  
  className="a-css-class"  
  style={{ color: "purple" }}  
>  
  Item 1  
</Item>
```

--------------------------------

### Style with Styled-Components

Source: https://fkhadra.github.io/react-contexify/how-to-style

Override menu styles using the styled-components library.

```javascript
import styled from 'styled-components';  
import { Menu } from 'contexify';  
  
const StyledMenu = styled(Menu).attrs({  
  // custom props  
})`  
  .contexify_submenu-arrow {}  
  .contexify_separator {}  
  .contexify_item {}  
`;  
```

--------------------------------

### Hide All Context Menus

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Use this method to immediately close all currently displayed context menus. Ensure the 'react-contexify' library is imported.

```javascript
import { contextMenu } from 'react-contexify';

// hide all menus
contextMenu.hideAll()
```

--------------------------------

### Set Custom Context Menu Position

Source: https://fkhadra.github.io/react-contexify/set-a-custom-position

Use the `show` function with the `position` option to specify exact `x` and `y` coordinates for the context menu. Ensure the `useContextMenu` hook is imported and initialized with the correct menu ID.

```javascript
import { useContextMenu } from "react-contexify";  
  
function App() {  
  const { show } = useContextMenu({ id: "menuId" });  
  
  function displayMenu(e) {  
    show({  
      event: e,  
      position: {  
        x: 100,  
        y: 10,  
      },  
    });  
  }  
  
  return <div onContextMenu={displayMenu}>Hello</div>;  
}
```

--------------------------------

### Display Context Menu at Custom Position

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Allows specifying a custom x and y coordinate to position the context menu, overriding the default event-based positioning.

```javascript
import { contextMenu } from 'react-contexify';

// custom position
function displayMenu(e: React.MouseEvent) {
  contextMenu({
    id: "menuId",
    event: e,
    position: {
      x: 100,
      y: 200
    }
  })
}
```

--------------------------------

### Update CSS import path

Source: https://fkhadra.github.io/react-contexify/migrate

The import path for the library CSS has been shortened.

```javascript
// ⛔️ Before  
import "react-contexify/dist/ReactContexify.css"  
  
// ✅ Now  
import "react-contexify/ReactContexify.css"
```

--------------------------------

### Track Menu Visibility with onVisibilityChange

Source: https://fkhadra.github.io/react-contexify/track-menu-visibility

Use the `onVisibilityChange` prop on the `Menu` component to receive a callback when the menu's visibility state changes. This is useful for performing actions based on whether the menu is open or closed.

```javascript
import { Menu, Item, useContextMenu } from "react-contexify"


function App(){
  const { show } = useContextMenu({id: "menuId"})

  const trackVisibility = (isVisible: boolean) => {
    console.log("Menu is", isVisible)
  }

  return (
    <div onClick={(e) => show({event: e})}>
      <Menu id="menuId" onVisibilityChange={trackVisibility}>
        <Item>Item 1</Item>
      </Menu>
    </div>
  )
}
```

--------------------------------

### Define ItemHandler and Item usage

Source: https://fkhadra.github.io/react-contexify/api/item

Defines the ItemParams interface for click handlers and demonstrates how to implement a handler function and apply it to an Item component.

```typescript
interface ItemParams<Props = any, Data = any> {  
  /**  
   * Any props supplied when triggering the menu  
   */  
  props?: Props;  
  
  /**  
   * Data object provided to item  
   */  
  data?: Data;  
  
  /**  
   * The event that occured on the Item node  
   */  
  event: DomEvent;  
  
  /**  
   * The event that triggered the context menu  
   */  
  triggerEvent: DomEvent;  
}  
  
function handleItemClick({   
  triggerEvent,  
  event,  
  props,  
  data   
  }: ItemParams<type of props, type of data>  
  ){  
  // retrieve the id of the Item or any other dom attribute  
  const id = e.currentTarget.id; // equal to "item-id"  
     
  // access the props and the data  
  console.log(props, data);  
     
  // access the coordinate of the mouse when the menu has been displayed  
  const {  clientX, clientY } = triggerEvent;     
}  
     
<Item   
  id="item-id"  
  onClick={handleItemClick}  
  data={{key: 'value'}}  
>  
  Something  
</Item>
```

--------------------------------

### ItemHandler Interface

Source: https://fkhadra.github.io/react-contexify/api/item

Definition of the handler function signature for Item click events.

```APIDOC
## ItemHandler

### Description
Interface for handling click events on an Item.

### Parameters
- **props** (any) - Optional - Any props supplied when triggering the menu
- **data** (any) - Optional - Data object provided to item
- **event** (DomEvent) - Required - The event that occurred on the Item node
- **triggerEvent** (DomEvent) - Required - The event that triggered the context menu
```

--------------------------------

### Submenu Component API

Source: https://fkhadra.github.io/react-contexify/api/submenu

Details regarding the props available for the Submenu component.

```APIDOC
## Submenu Component

### Description
The Submenu component is used to create nested menus within a react-contexify Menu.

### Parameters
- **label** (ReactNode) - Required - Any valid node which can be rendered as the submenu label.
- **children** (ReactNode) - Required - Any valid node which can be rendered inside the submenu.
- **arrow** (ReactNode) - Optional - Render a custom arrow. Default: ▶.
- **disabled** (BooleanPredicate) - Optional - Disable the Item. If a function is used, a boolean must be returned. Default: false.
- **hidden** (BooleanPredicate) - Optional - Hide the Item. If a function is used, a boolean must be returned. Default: false.
- **any HTML Attribute** (HTMLAttribute) - Optional - Any valid HTML attribute.

### Request Example
<Submenu label="a submenu" arrow="🚀">
  <Item>item 1</Item>
  <Item>item 2</Item>
</Submenu>
```

--------------------------------

### Applying HTML Attributes to Submenu

Source: https://fkhadra.github.io/react-contexify/api/submenu

Illustrates how to apply standard HTML attributes, including custom data attributes, class names, and inline styles, directly to a Submenu component.

```jsx
<Submenu 
  label="a submenu"  
  data-test="item-1"  
  className="a-css-class"  
  style={{ color: "purple" }}
>
  <Item>Item 1</Item>
</Submenu>
```

--------------------------------

### Render React-Contexify Menu Component

Source: https://fkhadra.github.io/react-contexify/handle-item-click

Displays the structure for a menu component using the Item and Menu components from React-Contexify.

```jsx
        Sponsor my work  
      </Item>  
    </Menu>  
  </div>  
);
```

--------------------------------

### hideAll Method

Source: https://fkhadra.github.io/react-contexify/api/use-context-menu

The `hideAll` method is used to close all context menus that are currently open in the application.

```APIDOC
## hideAll Method

### Description
Hides all context menus that are currently open.

### Request Example
```javascript
import { useContextMenu } from 'react-contexify';

const { show, hideAll } = useContextMenu({
  id: "menuId"
});

// hide all menus
hideAll()
```
```

--------------------------------

### Display Context Menu with Custom Props

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Passes custom props to the context menu's `Item` onClick callback. These props can override any defined during initialization.

```javascript
import { contextMenu } from 'react-contexify';

// pass props
function displayMenu(e: React.MouseEvent) {
  contextMenu({
    id: "menuId",
    event: e,
    props: {
      key: "value1",
      foo: false
    }
  })
}
```

--------------------------------

### contextMenu.hideAll

Source: https://fkhadra.github.io/react-contexify/api/context-menu

Hides all currently visible context menus.

```APIDOC
## contextMenu.hideAll

### Description
Closes all open context menus currently rendered on the page.
```

--------------------------------

### Override CSS Classes

Source: https://fkhadra.github.io/react-contexify/how-to-style

List of available CSS classes for targeting specific menu elements.

```css
.contexify {}  
  
.contexify__submenu--is-open,  
.contexify__submenu--is-open > .contexify__item__content {}  
  
.contexify__submenu--is-open > .contexify__submenu {}  
  
.contexify .contexify__submenu {}  
  
.contexify__submenu-arrow {}  
  
.contexify__separator {}  
  
.contexify__will-leave--disabled {}  
  
.contexify__item {}  
  
.contexify__item:not(.contexify__item--disabled):focus {}  
  
.contexify__item:not(.contexify__item--disabled):hover > .contexify__item__content,  
.contexify__item:not(.contexify__item--disabled):focus > .contexify__item__content {}  
  
.contexify__item:not(.contexify__item--disabled):hover > .contexify__submenu {}  
  
.contexify__item--disabled {}  
  
.contexify__item__content {}  
```

--------------------------------

### Override CSS Variables

Source: https://fkhadra.github.io/react-contexify/how-to-style

Customize menu appearance by overriding the default CSS variables.

```css
  --contexify-zIndex: 666;  
  --contexify-menu-minWidth: 220px;  
  --contexify-menu-padding: 6px;  
  --contexify-menu-radius: 6px;  
  --contexify-menu-bgColor: #fff;  
  --contexify-menu-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1),  
  2px 4px 4px rgba(0, 0, 0, 0.1),  
  3px 6px 6px rgba(0, 0, 0, 0.1);  
  --contexify-menu-negatePadding: var(--contexify-menu-padding);  
  
  --contexify-separator-color: rgba(0, 0, 0, 0.2);  
  --contexify-separator-margin: 5px;  
  --contexify-itemContent-padding: 6px;  
  --contexify-activeItem-radius: 4px;  
  --contexify-item-color: #333;  
  --contexify-activeItem-color: #fff;  
  --contexify-activeItem-bgColor: #3498db;  
  --contexify-rightSlot-color: #6f6e77;  
  --contexify-activeRightSlot-color: #fff;  
  --contexify-arrow-color: #6f6e77;  
  --contexify-activeArrow-color: #fff;  
```

--------------------------------

### Hide all active menus

Source: https://fkhadra.github.io/react-contexify/api/use-context-menu

Closes all currently visible context menus.

```javascript
import { useContextMenu } from 'react-contexify';  
  
const { show, hideAll } = useContextMenu({   
  id: "menuId"  
});  
  
// hide all menus  
hideAll()
```

--------------------------------

### Override Menu ID with a Single Hook Initialization

Source: https://fkhadra.github.io/react-contexify/handling-multiple-menu

A more flexible approach is to initialize the useContextMenu hook without an ID. This allows you to dynamically specify the menu ID when calling the 'show' function, enabling a single hook to manage multiple menus.

```javascript
import { useContextMenu } from "react-contexify";  
  
function App() {  
  const { show } = useContextMenu();  
  
  function displayMenu(e){  
    // run some logic to determine which menu you should display  
    show({  
      id: "menu2",  
      event: e  
    })  
  }  
  
  // etc...  
}
```

--------------------------------

### BooleanPredicate Interface and Usage

Source: https://fkhadra.github.io/react-contexify/api/submenu

Defines the HandlerParams and BooleanPredicate types for conditional item visibility or state. Shows how to use a direct boolean or a predicate function.

```typescript
interface HandlerParams<Props = any, Data = any> {
  /**
   * The event that triggered the context menu
   */
  triggerEvent: DomEvent;

  /**
   * Any props supplied when triggering the menu
   */
  props?: Props;

  /**
   * Data object provided to item
   */
  data?: Data;
}

type BooleanPredicate = boolean | ((args: HandlerParams) => boolean);


<Submenu label="a submenu" disabled={true}>
  <Item>Item 1</Item>
</Submenu>

function isDisabled({
  triggerEvent,
  props,
  data
}: PredicateParams<type of props, type of data>){
  return boolean;
}

<Submenu label="a submenu" disabled={isDisabled}>
  <Item>Item 1</Item>
</Submenu>


<Submenu label="a submenu" hidden={true}>
  <Item>Item 1</Item>
</Submenu>

function isHidden({
  triggerEvent,
  props,
  data
}: PredicateParams<type of props, type of data>){
  return boolean;
}

<Submenu label="a submenu" hidden={isHidden}>
  <Item>Item 1</Item>
</Submenu>
```

--------------------------------

### Disable Item with Function - Javascript

Source: https://fkhadra.github.io/react-contexify/disable-or-hide

Use a Javascript function with the 'disabled' prop to dynamically disable a context menu item. The function receives props, data, and the trigger event to determine the disabled state.

```javascript
import { useContextMenu, Menu, Item, Separator } from "react-contexify";  
  
function App() {  
  const { show } = useContextMenu({  
    id: "menuId",  
  });  
  
  function displayContextMenu(e) {  
    show({  
      event: e,  
      props: {  
        key: "foobar",  
      },  
    });  
  }  
  
  function isItemDisabled({ props, data, triggerEvent }) {  
    // use the parameters to determine if you want to disable the item or not  
    // you get the idea  
    return data === "foobar" && props.key === "foobar";  
  }  
  
  return (  
    <p onContextMenu={displayContextMenu}>  
      lorem ipsum  
      <Menu id="menuId">  
        <Item>Ipsum</Item>  
        <Separator />  
        <Item disabled>disabled</Item>  
        <Item disabled={isItemDisabled} data="foobar">  
          disabled using a function  
        </Item>  
      </Menu>  
    </p>  
  );
}

```

--------------------------------

### Disable Animations

Source: https://fkhadra.github.io/react-contexify/how-to-style

Set the animation prop to false to disable all menu transitions.

```javascript
<Menu animation={false}>  
```

--------------------------------

### Hide Item with Boolean or Function

Source: https://fkhadra.github.io/react-contexify/disable-or-hide

Hide context menu items by using the 'hidden' prop with a boolean value or a function. Hidden items are not rendered in the menu.

```html
<Item hidden>  
  hidden  
</Item>  
  
<Item hidden={isItemHidden}>  
  hidden  
</Item>  

```

--------------------------------

### BooleanPredicate Type

Source: https://fkhadra.github.io/react-contexify/api/item

Definition for conditional rendering or state logic (disabled/hidden) for Items.

```APIDOC
## BooleanPredicate

### Description
Type definition for conditional properties like disabled or hidden.

### Type
`boolean | ((args: HandlerParams) => boolean)`

### HandlerParams
- **triggerEvent** (DomEvent) - Required - The event that triggered the context menu
- **props** (any) - Optional - Any props supplied when triggering the menu
- **data** (any) - Optional - Data object provided to item
```

--------------------------------

### Disable boundaries check for Menu

Source: https://fkhadra.github.io/react-contexify/disable-boundaries-check

Set the disableBoundariesCheck prop to false on the Menu component to allow the menu to render outside of screen boundaries.

```javascript
import { Menu } from "react-contexify"  
  
  
function App(){  
  return (  
    <Menu id="menuId" disableBoundariesCheck={false}>  
      <Item>An Item</Item>  
    </Menu>  
  )  
}  
```

--------------------------------

### Define Menu ID

Source: https://fkhadra.github.io/react-contexify/quick-start

Assign a unique string ID to your menu. This ID is crucial for identifying and displaying the correct menu, especially when you have multiple menus in your application. The ID is also attached to the HTML node.

```javascript
const MENU_ID = "menu-id";

```

--------------------------------

### Replace Submenu arrow with a custom component

Source: https://fkhadra.github.io/react-contexify/change-submenu-arrow

Pass a React component element to the arrow prop to render custom UI as the submenu indicator.

```javascript
import { Menu, Item, Separator, Submenu } from "react-contexify";  
  
function CustomArrow() {  
  return <div>arrow 🤘</div>;  
}  
  
function MyMenu() {  
  return (  
    <Menu id="menu_id">  
      <Item>Foo</Item>  
      <Separator />  
      <Submenu label="Submenu" arrow={<CustomArrow />}>  
        <Item>Bar</Item>  
      </Submenu>  
    </Menu>  
  );  
}  
```
Tokens:
Raw