Examples/Custom Menu

Custom Menu

Customize the feedback menu with branded colors, custom icons, submenus, and role-based visibility.

Custom Menu Preview

Right-click this area to see a customized feedback menu with icons and custom labels:

Adding Custom Icons

Each menu item can have a custom icon prop. Use any React component (Lucide, Heroicons, custom SVGs, etc.):

app/providers.tsx

import { FeedbackProvider } from '@ewjdev/anyclick-react';
import { Bug, Lightbulb, Heart } from 'lucide-react';

const menuItems = [
  { 
    type: 'bug', 
    label: 'Report Bug', 
    icon: <Bug className="w-4 h-4 text-rose-400" />,
    showComment: true,
  },
  { 
    type: 'feature', 
    label: 'Suggest Feature', 
    icon: <Lightbulb className="w-4 h-4 text-amber-400" />,
    showComment: true,
  },
  { 
    type: 'love', 
    label: 'Love It!', 
    icon: <Heart className="w-4 h-4 text-pink-400" />,
    showComment: false,
  },
];

<FeedbackProvider adapter={adapter} menuItems={menuItems}>
  {children}
</FeedbackProvider>

Creating Submenus

Add a children array to create nested submenus:

const menuItems = [
  { type: 'bug', label: 'Report Bug', showComment: true },
  { type: 'feature', label: 'Request Feature', showComment: true },
  // Parent item with children creates a submenu
  {
    type: 'developer_menu', // Unique identifier
    label: 'Developer Tools',
    icon: <Code className="w-4 h-4" />,
    children: [
      { 
        type: 'cursor_local', 
        label: 'Fix with Cursor (Local)',
        showComment: true,
      },
      { 
        type: 'cursor_cloud', 
        label: 'Fix with Cursor (Cloud)',
        showComment: true,
      },
      { 
        type: 'copy_selector', 
        label: 'Copy CSS Selector',
        showComment: false,
      },
    ],
  },
];

Role-Based Menu Items

Show or hide menu items based on user roles using requiredRoles:

import { FeedbackProvider, filterMenuItemsByRole } from '@ewjdev/anyclick-react';
import type { FeedbackMenuItem, FeedbackUserContext } from '@ewjdev/anyclick-react';

// Define all menu items with role requirements
const allMenuItems: FeedbackMenuItem[] = [
  // Everyone sees these
  { type: 'bug', label: 'Report Bug', showComment: true },
  { type: 'feature', label: 'Request Feature', showComment: true },
  
  // Only developers and admins see this
  { 
    type: 'debug', 
    label: 'Debug Info', 
    icon: <Code className="w-4 h-4" />,
    requiredRoles: ['developer', 'admin'],
    showComment: false,
  },
  
  // Only admins see this
  { 
    type: 'admin_feedback', 
    label: 'Admin Report', 
    icon: <Shield className="w-4 h-4" />,
    requiredRoles: ['admin'],
    showComment: true,
  },
];

function Providers({ children, currentUser }) {
  // Create user context from your auth system
  const userContext: FeedbackUserContext = {
    roles: currentUser?.roles || [],
    id: currentUser?.id,
    email: currentUser?.email,
  };
  
  // Filter items based on user's roles
  const menuItems = filterMenuItemsByRole(allMenuItems, userContext);
  
  return (
    <FeedbackProvider 
      adapter={adapter} 
      menuItems={menuItems}
      metadata={userContext} // Include user info in feedback
    >
      {children}
    </FeedbackProvider>
  );
}

Custom Menu Styling

Apply custom styles or classes to the context menu:

<FeedbackProvider
  adapter={adapter}
  menuItems={menuItems}
  // Inline styles
  menuStyle={{
    borderRadius: '16px',
    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
    background: 'linear-gradient(135deg, #1a1a2e, #16213e)',
  }}
  // CSS class name (for Tailwind or custom CSS)
  menuClassName="my-custom-menu"
>
  {children}
</FeedbackProvider>

styles.css

/* Custom menu styling */
.my-custom-menu {
  --menu-bg: #1a1a2e;
  --menu-border: rgba(255, 255, 255, 0.1);
  --menu-hover: rgba(255, 255, 255, 0.05);
  --menu-text: #e5e7eb;
  --menu-text-muted: #9ca3af;
}

.my-custom-menu .menu-item:hover {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}

Custom Highlight Colors

Customize the colors used to highlight target and container elements:

<FeedbackProvider
  adapter={adapter}
  highlightConfig={{
    enabled: true,
    colors: {
      // Target element (what user right-clicked)
      targetColor: '#f43f5e', // Rose
      targetShadowOpacity: 0.3,
      
      // Container element (parent component)
      containerColor: '#8b5cf6', // Violet
      containerShadowOpacity: 0.15,
    },
    // Selectors to identify container elements
    containerSelectors: [
      '[data-component]',
      '[data-testid]',
      '.card',
      'section',
      'article',
    ],
  }}
>
  {children}
</FeedbackProvider>

Complete Example

app/providers.tsx

'use client';

import { FeedbackProvider, filterMenuItemsByRole } from '@ewjdev/anyclick-react';
import type { FeedbackMenuItem, FeedbackUserContext } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-';
import { Bug, Lightbulb, Heart, Code, Monitor, Cloud, Shield } from 'lucide-react';
import { useUser } from '@/hooks/useUser';

const adapter = createHttpAdapter({ endpoint: '/api/feedback' });

const allMenuItems: FeedbackMenuItem[] = [
  { 
    type: 'bug', 
    label: 'Report Bug', 
    icon: <Bug className="w-4 h-4 text-rose-400" />,
    showComment: true,
  },
  { 
    type: 'feature', 
    label: 'Suggest Feature', 
    icon: <Lightbulb className="w-4 h-4 text-amber-400" />,
    showComment: true,
  },
  { 
    type: 'love', 
    label: 'Love It!', 
    icon: <Heart className="w-4 h-4 text-pink-400" />,
    showComment: false,
  },
  {
    type: 'developer_menu',
    label: 'Developer Tools',
    icon: <Code className="w-4 h-4 text-cyan-400" />,
    requiredRoles: ['developer', 'admin'],
    children: [
      { 
        type: 'cursor_local', 
        label: 'Fix Locally',
        icon: <Monitor className="w-4 h-4" />,
        showComment: true,
      },
      { 
        type: 'cursor_cloud', 
        label: 'Fix with AI',
        icon: <Cloud className="w-4 h-4" />,
        showComment: true,
      },
    ],
  },
  { 
    type: 'admin_report', 
    label: 'Admin Report', 
    icon: <Shield className="w-4 h-4 text-emerald-400" />,
    requiredRoles: ['admin'],
    showComment: true,
  },
];

export function Providers({ children }: { children: React.ReactNode }) {
  const { user } = useUser();
  
  const userContext: FeedbackUserContext = {
    roles: user?.roles || [],
    id: user?.id,
    email: user?.email,
  };
  
  const menuItems = filterMenuItemsByRole(allMenuItems, userContext);
  
  return (
    <FeedbackProvider
      adapter={adapter}
      menuItems={menuItems}
      metadata={userContext}
      highlightConfig={{
        enabled: true,
        colors: {
          targetColor: '#f43f5e',
          containerColor: '#8b5cf6',
        },
      }}
    >
      {children}
    </FeedbackProvider>
  );
}

Up next

Learn how to integrate with GitHub Issues for automatic issue creation with screenshots.

GitHub Integration