### Install React Contexify

Source: https://github.com/fkhadra/react-contexify/blob/main/README.md

Commands to install the package using yarn or npm.

```sh
$ yarn add react-contexify
```

```sh
$ npm install --save react-contexify
```

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

### Install Dependencies

Source: https://github.com/fkhadra/react-contexify/blob/main/CONTRIBUTING.md

Install project dependencies using Yarn after cloning the repository and setting up your branch.

```bash
yarn install
```

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

### Configure Menu Component

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Examples of defining a Menu component with themes, animations, and visibility callbacks, including how to disable animations.

```tsx
import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';

function FileExplorer() {
  const { show } = useContextMenu({ id: 'file-menu' });

  return (
    <div>
      <div onContextMenu={(e) => show({ event: e })}>
        Right-click for file options
      </div>

      <Menu
        id="file-menu"
        theme="dark"
        animation="scale"
        onVisibilityChange={(isVisible) => {
          console.log('Menu visible:', isVisible);
        }}
      >
        <Item id="new">New File</Item>
        <Item id="open">Open</Item>
        <Separator />
        <Item id="save">Save</Item>
        <Item id="save-as">Save As...</Item>
      </Menu>
    </div>
  );
}

// Disable specific animations
<Menu
  id="partial-animation-menu"
  animation={{ enter: 'fade', exit: false }}
>
  {/* items */}
</Menu>

// Disable all animations
<Menu id="no-animation-menu" animation={false}>
  {/* items */}
</Menu>
```

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

### Imperative contextMenu API for Programmatic Control

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Shows how to use the imperative `contextMenu` API to programmatically show and hide menus. Includes examples for showing menus at specific positions, closing all menus, and triggering menus with custom events.

```typescript
import { Menu, Item, contextMenu } from 'react-contexify';

const MENU_ID = 'imperative-menu';

// Show menu programmatically
function showMenuAtPosition(x: number, y: number) {
  contextMenu.show({
    id: MENU_ID,
    event: new MouseEvent('contextmenu'),
    position: { x, y },
    props: {
      source: 'programmatic',
    },
  });
}

// Hide all open menus
function closeAllMenus() {
  contextMenu.hideAll();
}

// Usage with custom events
document.addEventListener('keydown', (e) => {
  if (e.key === 'F10') {
    contextMenu.show({
      id: MENU_ID,
      event: e,
      position: { x: 100, y: 100 },
    });
  }
});

// React component with custom position
function CustomPositionMenu() {
  function handleClick(e: React.MouseEvent) {
    // Show menu at a fixed position instead of cursor location
    contextMenu.show({
      id: MENU_ID,
      event: e,
      position: { x: 0, y: 0 }, // Top-left corner
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Show Menu at Origin</button>
      <button onClick={closeAllMenus}>Close All Menus</button>

      <Menu id={MENU_ID}>
        <Item>Option 1</Item>
        <Item>Option 2</Item>
      </Menu>
    </div>
  );
}
```

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

### RightSlot Component for Menu Item Adornments

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Illustrates the RightSlot component for displaying content like keyboard shortcuts or icons on the right side of menu items. Includes examples of default usage and custom styling.

```tsx
import { Menu, Item, RightSlot, Submenu } from 'react-contexify';

function ShortcutMenu() {
  return (
    <Menu id="shortcut-menu">
      <Item
        id="undo"
        keyMatcher={(e) => e.ctrlKey && e.key === 'z'}
        onClick={() => console.log('Undo')}
      >
        Undo
        <RightSlot>Ctrl+Z</RightSlot>
      </Item>

      <Item
        id="redo"
        keyMatcher={(e) => e.ctrlKey && e.key === 'y'}
        onClick={() => console.log('Redo')}
      >
        Redo
        <RightSlot>Ctrl+Y</RightSlot>
      </Item>

      <Item id="select-all">
        Select All
        <RightSlot>Ctrl+A</RightSlot>
      </Item>

      {/* Custom styled RightSlot */}
      <Item id="premium">
        Premium Feature
        <RightSlot className="premium-badge">PRO</RightSlot>
      </Item>
    </Menu>
  );
}
```

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

### Implement a Context Menu

Source: https://github.com/fkhadra/react-contexify/blob/main/README.md

Basic implementation showing how to trigger a menu using the useContextMenu hook and define menu items.

```js
import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';

const MENU_ID = 'blahblah';

function App() {
  const { show } = useContextMenu({
    id: MENU_ID,
  });

  function handleContextMenu(event){
      show({
        event,
        props: {
            key: 'value'
        }
      })
  }

  // I'm using a single event handler for all items
  // but you don't have too :)
  const handleItemClick = ({ id, event, props }) => {
    switch (id) {
      case "copy":
        console.log(event, props)
        break;
      case "cut";
        console.log(event, props);
        break;
      //etc...
    }
  }

  return (
    <div>
    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  
    <Menu id={MENU_ID}>
      <Item id="copy" onClick={handleItemClick}>Copy</Item>
      <Item id="cut" onClick={handleItemClick}>Cut</Item>
      <Separator />
      <Item disabled>Disabled</Item>
      <Separator />
      <Submenu label="Foobar">
        <Item id="reload" onClick={handleItemClick}>Reload</Item>
        <Item id="something" onClick={handleItemClick}>Do something else</Item>
      </Submenu>
    </Menu>
    </div>
  );
}
```

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

### Create a File Menu with Items

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Demonstrates creating a context menu with various Item components, including basic items, items with keyboard shortcuts, conditionally disabled/hidden items, and items that stay open on click. Requires `useContextMenu` hook and `Item`, `Menu`, `RightSlot` components.

```tsx
import { Menu, Item, RightSlot, ItemParams } from 'react-contexify';

interface FileProps {
  fileName: string;
  isReadOnly: boolean;
}

function FileMenu() {
  const { show } = useContextMenu({ id: 'file-item-menu' });

  function handleItemClick({ id, event, props, data, triggerEvent }: ItemParams<FileProps>) {
    console.log('Item clicked:', id);
    console.log('File name:', props?.fileName);
    console.log('Item data:', data);
    console.log('Mouse position:', triggerEvent.clientX, triggerEvent.clientY);
  }

  function handleRightClick(e: React.MouseEvent, file: FileProps) {
    show({
      event: e,
      props: file,
    });
  }

  return (
    <div>
      <div onContextMenu={(e) => handleRightClick(e, { fileName: 'report.pdf', isReadOnly: true })}>
        report.pdf
      </div>

      <Menu id="file-item-menu">
        {/* Basic item with onClick */}
        <Item id="copy" onClick={handleItemClick} data={{ action: 'copy' }}>
          Copy
          <RightSlot>Ctrl+C</RightSlot>
        </Item>

        {/* Item with keyboard shortcut */}
        <Item
          id="paste"
          onClick={handleItemClick}
          keyMatcher={(e) => e.ctrlKey && e.key === 'v'}
        >
          Paste
          <RightSlot>Ctrl+V</RightSlot>
        </Item>

        {/* Conditionally disabled item */}
        <Item
          id="edit"
          onClick={handleItemClick}
          disabled={({ props }) => props?.isReadOnly === true}
        >
          Edit
        </Item>

        {/* Conditionally hidden item */}
        <Item
          id="admin-only"
          onClick={handleItemClick}
          hidden={({ props }) => !props?.isAdmin}
        >
          Admin Settings
        </Item>

        {/* Item that stays open on click (useful for forms) */}
        <Item
          id="toggle"
          onClick={handleItemClick}
          closeOnClick={false}
        >
          Toggle Option
        </Item>

        {/* Disabled item using boolean */}
        <Item disabled>
          Cannot Click
        </Item>
      </Menu>
    </div>
  );
}
```

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

### Clone Repository and Create Branch

Source: https://github.com/fkhadra/react-contexify/blob/main/CONTRIBUTING.md

Clone the repository and create a new local branch for your contributions. Ensure you are using Yarn for dependency management.

```bash
git clone https://github.com/fkhadra/react-contexify.git
cd react-contexify

git checkout -b my-branch
```

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

### Create an Editor Context Menu with Submenus

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Illustrates building a context menu with nested Submenu components and various Item types. Supports theming and custom arrows for submenus. Requires `Menu`, `Item`, `Submenu`, `Separator`, and `RightSlot` components.

```tsx
import { Menu, Item, Submenu, Separator, RightSlot } from 'react-contexify';

function EditorContextMenu() {
  return (
    <Menu id="editor-menu" theme="light">
      <Item id="cut">Cut</Item>
      <Item id="copy">Copy</Item>
      <Item id="paste">Paste</Item>

      <Separator />

      {/* Basic submenu */}
      <Submenu label="Format">
        <Item id="bold">Bold</Item>
        <Item id="italic">Italic</Item>
        <Item id="underline">Underline</Item>

        {/* Nested submenu */}
        <Submenu label="Text Color">
          <Item id="red" data={{ color: '#ff0000' }}>Red</Item>
          <Item id="blue" data={{ color: '#0000ff' }}>Blue</Item>
          <Item id="green" data={{ color: '#00ff00' }}>Green</Item>
        </Submenu>

        <Submenu label="Heading">
          <Item id="h1">Heading 1</Item>
          <Item id="h2">Heading 2</Item>
          <Item id="h3">Heading 3</Item>
        </Submenu>
      </Submenu>

      {/* Conditionally disabled submenu */}
      <Submenu
        label="Advanced"
        disabled={({ props }) => !props?.isAdvancedUser}
      >
        <Item id="macros">Run Macros</Item>
        <Item id="scripts">Execute Script</Item>
      </Submenu>

      {/* Custom arrow for submenu */}
      <Submenu label="Export" arrow={<span>→</span>}>
        <Item id="pdf">Export as PDF</Item>
        <Item id="docx">Export as DOCX</Item>
      </Submenu>
    </Menu>
  );
}
```

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

### Trigger Context Menus with useContextMenu

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Demonstrates using the useContextMenu hook to show and hide menus, and passing custom props to menu items.

```tsx
import { Menu, Item, useContextMenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';

const MENU_ID = 'my-context-menu';

function App() {
  const { show, hideAll } = useContextMenu({
    id: MENU_ID,
  });

  function handleContextMenu(event: React.MouseEvent) {
    show({
      event,
      props: {
        userId: 123,
        name: 'John Doe',
      },
    });
  }

  return (
    <div>
      <div onContextMenu={handleContextMenu}>
        Right-click me to open context menu
      </div>
      <button onClick={hideAll}>Close all menus</button>

      <Menu id={MENU_ID}>
        <Item onClick={({ props }) => console.log('User:', props.name)}>
          View Profile
        </Item>
        <Item onClick={({ props }) => console.log('Edit user:', props.userId)}>
          Edit User
        </Item>
      </Menu>
    </div>
  );
}
```

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

### contextMenu API

Source: https://context7.com/fkhadra/react-contexify/llms.txt

The imperative contextMenu API provides direct control over showing and hiding menus without using the hook.

```APIDOC
## contextMenu API

### Description
The imperative `contextMenu` API provides direct control over showing and hiding menus without using the hook. This is useful for triggering menus from non-React code or when you need more control over the menu lifecycle.

### Methods
- **contextMenu.show(options: object)**: Shows a menu.
  - **options.id** (string) - Required - The ID of the menu to show.
  - **options.event** (Event) - Required - The trigger event.
  - **options.position** (object) - Optional - The position to show the menu at. `{ x: number, y: number }`.
  - **options.props** (object) - Optional - Props to pass to the menu.
- **contextMenu.hideAll()**: Hides all currently open menus.

### Usage Example
```tsx
import { Menu, Item, contextMenu } from 'react-contexify';

const MENU_ID = 'imperative-menu';

// Show menu programmatically
function showMenuAtPosition(x: number, y: number) {
  contextMenu.show({
    id: MENU_ID,
    event: new MouseEvent('contextmenu'),
    position: { x, y },
    props: {
      source: 'programmatic',
    },
  });
}

// Hide all open menus
function closeAllMenus() {
  contextMenu.hideAll();
}

// Usage with custom events
document.addEventListener('keydown', (e) => {
  if (e.key === 'F10') {
    contextMenu.show({
      id: MENU_ID,
      event: e,
      position: { x: 100, y: 100 },
    });
  }
});

// React component with custom position
function CustomPositionMenu() {
  function handleClick(e: React.MouseEvent) {
    // Show menu at a fixed position instead of cursor location
    contextMenu.show({
      id: MENU_ID,
      event: e,
      position: { x: 0, y: 0 }, // Top-left corner
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Show Menu at Origin</button>
      <button onClick={closeAllMenus}>Close All Menus</button>

      <Menu id={MENU_ID}>
        <Item>Option 1</Item>
        <Item>Option 2</Item>
      </Menu>
    </div>
  );
}
```
```

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

### Implement a Context Menu with React Contexify

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Integrates a context menu into a user table with dynamic props, submenus, and conditional rendering based on user state.

```tsx
import React, { useState } from 'react';
import {
  Menu,
  Item,
  Separator,
  Submenu,
  RightSlot,
  useContextMenu,
  ItemParams
} from 'react-contexify';
import 'react-contexify/ReactContexify.css';

interface UserData {
  id: number;
  name: string;
  role: 'admin' | 'user';
  status: 'active' | 'inactive';
}

function UserTable() {
  const [selectedUser, setSelectedUser] = useState<UserData | null>(null);
  const { show } = useContextMenu({ id: 'user-menu' });

  const users: UserData[] = [
    { id: 1, name: 'Alice', role: 'admin', status: 'active' },
    { id: 2, name: 'Bob', role: 'user', status: 'active' },
    { id: 3, name: 'Charlie', role: 'user', status: 'inactive' },
  ];

  function handleContextMenu(e: React.MouseEvent, user: UserData) {
    setSelectedUser(user);
    show({
      event: e,
      props: user,
    });
  }

  function handleAction({ id, props, data }: ItemParams<UserData>) {
    console.log(`Action: ${id}`);
    console.log(`User: ${props?.name}`);
    console.log(`Data: ${JSON.stringify(data)}`);

    switch (id) {
      case 'view':
        alert(`Viewing ${props?.name}`);
        break;
      case 'edit':
        alert(`Editing ${props?.name}`);
        break;
      case 'delete':
        if (confirm(`Delete ${props?.name}?`)) {
          console.log('Deleted');
        }
        break;
      case 'activate':
      case 'deactivate':
        console.log(`Toggling status for ${props?.name}`);
        break;
    }
  }

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr
              key={user.id}
              onContextMenu={(e) => handleContextMenu(e, user)}
              style={{ cursor: 'context-menu' }}
            >
              <td>{user.name}</td>
              <td>{user.role}</td>
              <td>{user.status}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <Menu
        id="user-menu"
        theme="dark"
        animation="scale"
        onVisibilityChange={(visible) => {
          if (!visible) setSelectedUser(null);
        }}
      >
        <Item id="view" onClick={handleAction}>
          View Profile
          <RightSlot>Enter</RightSlot>
        </Item>

        <Item
          id="edit"
          onClick={handleAction}
          keyMatcher={(e) => e.key === 'e'}
        >
          Edit User
          <RightSlot>E</RightSlot>
        </Item>

        <Separator />

        {/* Show based on current status */}
        <Item
          id="activate"
          onClick={handleAction}
          hidden={({ props }) => props?.status === 'active'}
        >
          Activate User
        </Item>

        <Item
          id="deactivate"
          onClick={handleAction}
          hidden={({ props }) => props?.status === 'inactive'}
        >
          Deactivate User
        </Item>

        <Submenu label="Change Role">
          <Item
            id="role-admin"
            onClick={handleAction}
            data={{ newRole: 'admin' }}
            disabled={({ props }) => props?.role === 'admin'}
          >
            Admin
          </Item>
          <Item
            id="role-user"
            onClick={handleAction}
            data={{ newRole: 'user' }}
            disabled={({ props }) => props?.role === 'user'}
          >
            User
          </Item>
        </Submenu>

        <Separator />

        {/* Admin-only actions */}
        <Submenu
          label="Admin Actions"
          hidden={({ props }) => props?.role !== 'admin'}
        >
          <Item id="reset-password" onClick={handleAction}>
            Reset Password
          </Item>
          <Item id="view-logs" onClick={handleAction}>
            View Activity Logs
          </Item>
        </Submenu>

        <Separator hidden={({ props }) => props?.role !== 'admin'} />

        <Item
          id="delete"
          onClick={handleAction}
          disabled={({ props }) => props?.role === 'admin'}
        >
          Delete User
          <RightSlot>Del</RightSlot>
        </Item>
      </Menu>
    </div>
  );
}

export default UserTable;
```

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

### Separator Component with Conditional Hiding

Source: https://context7.com/fkhadra/react-contexify/llms.txt

Demonstrates the Separator component, showing how to render always-visible and conditionally hidden dividers using the `hidden` prop with a predicate function.

```tsx
import { Menu, Item, Separator } from 'react-contexify';

function ConditionalSeparatorMenu() {
  return (
    <Menu id="separator-menu">
      <Item id="view">View</Item>
      <Item id="edit">Edit</Item>

      {/* Always visible separator */}
      <Separator />

      <Item id="copy">Copy</Item>
      <Item id="paste">Paste</Item>

      {/* Conditionally hidden separator */}
      <Separator
        hidden={({ props }) => !props?.showAdvanced}
        data={{ section: 'advanced' }}
      />

      <Item
        id="advanced"
        hidden={({ props }) => !props?.showAdvanced}
      >
        Advanced Options
      </Item>
    </Menu>
  );
}
```

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

### RightSlot Component

Source: https://context7.com/fkhadra/react-contexify/llms.txt

The RightSlot component is used to display content on the right side of a menu item, typically for keyboard shortcuts or icons.

```APIDOC
## RightSlot Component

### Description
The `RightSlot` component is used to display content on the right side of a menu item, typically for keyboard shortcuts or icons. It automatically aligns content to the right edge of the menu item.

### Props
- **className** (string) - Optional - Custom CSS class for styling the RightSlot.

### Usage Example
```tsx
import { Menu, Item, RightSlot, Submenu } from 'react-contexify';

function ShortcutMenu() {
  return (
    <Menu id="shortcut-menu">
      <Item
        id="undo"
        keyMatcher={(e) => e.ctrlKey && e.key === 'z'}
        onClick={() => console.log('Undo')}
      >
        Undo
        <RightSlot>Ctrl+Z</RightSlot>
      </Item>

      <Item
        id="redo"
        keyMatcher={(e) => e.ctrlKey && e.key === 'y'}
        onClick={() => console.log('Redo')}
      >
        Redo
        <RightSlot>Ctrl+Y</RightSlot>
      </Item>

      <Item id="select-all">
        Select All
        <RightSlot>Ctrl+A</RightSlot>
      </Item>

      {/* Custom styled RightSlot */}
      <Item id="premium">
        Premium Feature
        <RightSlot className="premium-badge">PRO</RightSlot>
      </Item>
    </Menu>
  );
}
```
```

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

### Separator Component

Source: https://context7.com/fkhadra/react-contexify/llms.txt

The Separator component renders a visual divider line between menu items. It supports conditional hiding through the `hidden` prop.

```APIDOC
## Separator Component

### Description
The `Separator` component renders a visual divider line between menu items. It supports conditional hiding through the `hidden` prop, which can be either a boolean or a predicate function.

### Props
- **hidden** (boolean | function) - Optional - Determines if the separator should be hidden. If a function, it receives `{ props }` and should return a boolean.
- **data** (object) - Optional - Custom data associated with the separator.

### Usage Example
```tsx
import { Menu, Item, Separator } from 'react-contexify';

function ConditionalSeparatorMenu() {
  return (
    <Menu id="separator-menu">
      <Item id="view">View</Item>
      <Item id="edit">Edit</Item>

      {/* Always visible separator */}
      <Separator />

      <Item id="copy">Copy</Item>
      <Item id="paste">Paste</Item>

      {/* Conditionally hidden separator */}
      <Separator
        hidden={({ props }) => !props?.showAdvanced}
        data={{ section: 'advanced' }}
      />

      <Item
        id="advanced"
        hidden={({ props }) => !props?.showAdvanced}
      >
        Advanced Options
      </Item>
    </Menu>
  );
}
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.