User Context Menu

Installation

Usage

import UserContextMenu from "@/components/ruixen/user-context-menu";
 
export default function App() {
  return (
    <div className="p-8">
      <UserContextMenu />
    </div>
  );
}

Features

• Right-Click Activation: Context menu on right-click
• User Avatar: Profile picture display
• Context Actions: View Profile, Send Message, Block User
• Separator Lines: Visual grouping of actions
• Icon Integration: Lucide icons for all actions
• Keyboard Navigation: Arrow key and Enter support

Context Actions

• View Profile: Navigate to user's profile page
• Send Message: Open messaging interface
• Block User: Block/unblock user functionality

Customization

You can customize the user data and context actions:

const user = {
  name: "Jane Smith",
  avatar: "/path/to/avatar.jpg",
  status: "online"
};
 
// Add custom context actions
{
  icon: <CustomIcon />,
  label: "Custom Action",
  onClick: () => handleCustomAction()
}

Event Handlers

const handleViewProfile = (userId: string) => {
  // Navigate to profile
};
 
const handleSendMessage = (userId: string) => {
  // Open chat
};
 
const handleBlockUser = (userId: string) => {
  // Block user
};

Use Cases

Perfect for:

• User Lists: Team member directories
• Chat Applications: User interaction menus
• Social Platforms: Profile management
• Admin Panels: User moderation tools
• Collaboration Tools: Team member actions