Feature: Item child callbacks

example/components/App.tsx

@@ -252,14 +252,18 @@ export function App() {
           data-test={DATA_TEST.MENU_FIRST_ITEM}
           hidden={state.hideItems}
         >
-          Item 1<RightSlot>⌘C</RightSlot>
+          {(params: ItemParams) => {
+            return JSON.stringify(params.props);
+          }}
         </Item>
         <Item
+          onClick={handleItemClick}
           data-test={DATA_TEST.MENU_SECOND_ITEM}
-          hidden={() => state.hideItems}
+          hidden={state.hideItems}
         >
-          Item 2
+          Item 1<RightSlot>⌘C</RightSlot>
         </Item>
+        <Item hidden={() => state.hideItems}>Item 2</Item>
         <Item
           onClick={() => {
             setState({

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0",
+  "version": "6.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,11 +46,11 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "react-contexify",
+  "name": "react-contexify-props",
   "author": "Fadi Khadra <[email protected]> (https://github.com/fkhadra)",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fkhadra/react-contexify.git"
+    "url": "git+https://github.com/flynow10/react-contexify-props.git"
   },
   "bugs": {
     "url": "https://github.com/fkhadra/react-contexify/issues"

src/components/Item.tsx

@@ -7,6 +7,7 @@ import {
   BooleanPredicate,
   HandlerParamsEvent,
   BuiltInOrString,
+  HandlerParams,
 } from '../types';
 import { useItemTrackerContext } from './ItemTrackerProvider';
 import { NOOP, CssClass } from '../constants';
@@ -15,11 +16,20 @@ import { contextMenu } from '../core';
 
 export interface ItemProps
   extends InternalProps,
-    Omit<React.HTMLAttributes<HTMLElement>, 'hidden' | 'disabled' | 'onClick'> {
+    Omit<
+      React.HTMLAttributes<HTMLElement>,
+      'hidden' | 'disabled' | 'onClick' | 'children'
+    > {
   /**
    * Any valid node that can be rendered
+   * If a function is used, a ReactNode must be returned
+   *
+   * @param id The item id, when defined
+   * @param props The props passed when you called `show(e, {props: yourProps})`
+   * @param data The data defined on the `Item`
+   * @param triggerEvent The event that triggered the context menu
    */
-  children: ReactNode;
+  children: ((args: HandlerParams) => ReactNode) | ReactNode;
 
   /**
    * Passed to the `Item` onClick callback. Accessible via `data`
@@ -200,6 +210,9 @@ export const Item: React.FC<ItemProps> = ({
 
   if (isHidden) return null;
 
+  const childrenPassedProps =
+    typeof children === 'function' ? children(handlerParams) : children;
+
   return (
     <div
       {...{ ...rest, [handlerEvent]: handleClick }}
@@ -213,7 +226,7 @@ export const Item: React.FC<ItemProps> = ({
       role="menuitem"
       aria-disabled={isDisabled}
     >
-      <div className={CssClass.itemContent}>{children}</div>
+      <div className={CssClass.itemContent}>{childrenPassedProps}</div>
     </div>
   );
 };

src/types/index.ts

@@ -26,7 +26,7 @@ export type MenuId = string | number;
 /**
  * Used both by `PredicatParams` and `ItemParams`
  */
-interface HandlerParams<Props = any, Data = any> {
+export interface HandlerParams<Props = any, Data = any> {
   /**
    * The id of the item when provided
    */