jamsrui_context_menu_quickstart_with_actionable_items.ts

1import React from 'react';
2import { 
3  ContextMenu, 
4  ContextMenuTrigger, 
5  ContextMenuContent, 
6  ContextMenuItem, 
7  ContextMenuSeparator 
8} from '@jamsrui/context-menu';
9
10const ContextMenuDemo = () => {
11  return (
12    <ContextMenu>
13      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
14        Right click here
15      </ContextMenuTrigger>
16      <ContextMenuContent className="w-64">
17        <ContextMenuItem inset onClick={() => console.log('Back clicked')}>
18          Back
19        </ContextMenuItem>
20        <ContextMenuItem inset disabled>
21          Forward
22        </ContextMenuItem>
23        <ContextMenuItem inset onClick={() => window.location.reload()}>
24          Reload
25        </ContextMenuItem>
26        <ContextMenuSeparator />
27        <ContextMenuItem inset>
28          Save Page As...
29        </ContextMenuItem>
30        <ContextMenuItem inset>
31          Print...
32        </ContextMenuItem>
33      </ContextMenuContent>
34    </ContextMenu>
35  );
36};
37
38export default ContextMenuDemo;