or

yarn add @codeshumon/popup-menu

function App() { return ( <PopupMenu trigger={<button>Open Menu</button>} > <div onClick={() => console.log('Option 1')}>Option 1</div> <div onClick={() => console.log('Option 2')}>Option 2</div> <div onClick={() => console.log('Option 3')}>Option 3</div> </PopupMenu> ); }

export default App;

function App() { return ( <PopupMenu trigger={<button>User Menu</button>} header={<div className="menu-header">User Options</div>} footer={<div className="menu-footer">Settings</div>} position="bottom-right" animationDuration={300} theme="dark" > <div onClick={() => console.log('Profile')}>Profile</div> <div onClick={() => console.log('Settings')}>Settings</div> <div onClick={() => console.log('Logout')}>Logout</div> </PopupMenu> ); }

function App() { return ( <PopupMenu trigger={<button>Custom Position</button>} position="top-center" viewportPadding={20} enableScroll={true} noDefaultStyle={false} theme="light" onOpenChange={(isOpen) => console.log('Menu is:', isOpen)} onClose={() => console.log('Menu closed')} > <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </PopupMenu> ); }

function App() { return ( <PopupMenu trigger={<button>Hover Over Me</button>} hoverTrigger={true} animation="in" position="right-center" > <div>Fades in from the left</div> <div>Item 2</div> </PopupMenu> ); }

function App() { return ( <PopupMenu trigger={<button>Custom Styled Menu</button>} noDefaultStyle={true} menuClassName="fixed z-50 flex flex-col bg-blue-600 text-white rounded-md shadow-lg min-w-[120px] opacity-0 transition-all duration-200" position="bottom-right" > <div className="px-3 py-2 hover:bg-blue-700 cursor-pointer">Option 1</div> <div className="px-3 py-2 hover:bg-blue-700 cursor-pointer">Option 2</div> <div className="px-3 py-2 hover:bg-blue-700 cursor-pointer">Option 3</div> </PopupMenu> ); }

const menuProps: PopupMenuProps = { trigger: <button>Menu</button>, children: <div>Menu Item</div>, position: 'bottom-right' as PositionType, theme: 'dark', enableScroll: true, onOpenChange: (isOpen) => console.log(isOpen), };

// Usage in component function MyComponent() { return ( <PopupMenu {...menuProps} /> ); }