react Architecture Docs
Home / Function/ KeyValueContextMenuContainer() — react Function Reference

KeyValueContextMenuContainer() — react Function Reference

Architecture documentation for the KeyValueContextMenuContainer() function in KeyValueContextMenuContainer.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

Dependency Diagram

graph TD
  2c96598e_8c7d_7e60_4e6d_c5f0606f47c2["KeyValueContextMenuContainer()"]
  1be4c533_22f9_d4ee_5d61_bdd15076cee1["KeyValueContextMenuContainer.js"]
  2c96598e_8c7d_7e60_4e6d_c5f0606f47c2 -->|defined in| 1be4c533_22f9_d4ee_5d61_bdd15076cee1
  style 2c96598e_8c7d_7e60_4e6d_c5f0606f47c2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.js lines 40–135

export default function KeyValueContextMenuContainer({
  children,
  anchorElementRef,
  store,
  attributeSourceCanBeInspected,
  bridge,
  id,
  path,
  canBeCopiedToClipboard,
}: Props): React.Node {
  const {
    isEnabledForInspectedElement: isContextMenuEnabledForInspectedElement,
    viewAttributeSourceFunction,
  } = useContext<ContextMenuContextType>(ContextMenuContext);

  const menuItems = React.useMemo(() => {
    const items = [
      {
        onClick: () => {
          const rendererID = store.getRendererIDForElement(id);
          if (rendererID !== null) {
            storeAsGlobalAPI({
              bridge,
              id,
              path,
              rendererID,
            });
          }
        },
        content: (
          <span className={styles.ContextMenuItemContent}>
            <Icon type="store-as-global-variable" />
            <label>Store as global variable</label>
          </span>
        ),
      },
    ];

    if (canBeCopiedToClipboard) {
      items.unshift({
        onClick: () => {
          const rendererID = store.getRendererIDForElement(id);
          if (rendererID !== null) {
            copyInspectedElementPathAPI({
              bridge,
              id,
              path,
              rendererID,
            });
          }
        },
        content: (
          <span className={styles.ContextMenuItemContent}>
            <Icon type="copy" />
            <label>Copy value to clipboard</label>
          </span>
        ),
      });
    }

    if (viewAttributeSourceFunction != null && attributeSourceCanBeInspected) {
      items.push({
        onClick: () => viewAttributeSourceFunction(id, path),
        content: (
          <span className={styles.ContextMenuItemContent}>
            <Icon type="code" />
            <label>Go to definition</label>
          </span>
        ),
      });
    }
    return items;
  }, [
    store,
    viewAttributeSourceFunction,
    attributeSourceCanBeInspected,
    canBeCopiedToClipboard,
    bridge,
    id,
    path,
  ]);

Domain

Subdomains

Defined In

Source

Frequently Asked Questions

What does KeyValueContextMenuContainer() do?
KeyValueContextMenuContainer() is a function in the react codebase, defined in packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.js.
Where is KeyValueContextMenuContainer() defined?
KeyValueContextMenuContainer() is defined in packages/react-devtools-shared/src/devtools/views/Components/KeyValueContextMenuContainer.js at line 40.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free