![\"npm](\"https://img.shields.io/npm/v/@codeshumon/popup-menu.svg\")
\r\n\r\n\r\n![\"License:](\"https://img.shields.io/badge/License-MIT-blue.svg\"){kind=icon}
\r\n\r\n\r\nA lightweight, customizable React popup menu component with automatic positioning, smooth animations, and zero dependencies.\r\n
\r\n\r\n\r\n\r\n\r\n \r\n ![\"Popup](\"https://img.youtube.com/vi/VqWXTRMDz9g/maxresdefault.jpg\")
\r\n
Click the image above to watch the video on YouTube
\r\n\r\nnoDefaultStyle optionnpm install @codeshumon/popup-menu\r\n\r\nor\r\n\r\nyarn add @codeshumon/popup-menu\r\nimport React from 'react';\r\nimport { PopupMenu } from '@codeshumon/popup-menu';\r\n\r\nfunction App() {\r\n return (\r\n <PopupMenu\r\n trigger={<button>Open Menu</button>}\r\n >\r\n <div onClick={() => console.log('Option 1')}>Option 1</div>\r\n <div onClick={() => console.log('Option 2')}>Option 2</div>\r\n <div onClick={() => console.log('Option 3')}>Option 3</div>\r\n </PopupMenu>\r\n );\r\n}\r\n\r\nexport default App;\r\nimport React from 'react';\r\nimport { PopupMenu } from '@codeshumon/popup-menu';\r\n\r\nfunction App() {\r\n return (\r\n <PopupMenu\r\n trigger={<button>User Menu</button>}\r\n header={<div className=\"menu-header\">User Options</div>}\r\n footer={<div className=\"menu-footer\">Settings</div>}\r\n position=\"bottom-right\"\r\n animationDuration={300}\r\n theme=\"dark\"\r\n >\r\n <div onClick={() => console.log('Profile')}>Profile</div>\r\n <div onClick={() => console.log('Settings')}>Settings</div>\r\n <div onClick={() => console.log('Logout')}>Logout</div>\r\n </PopupMenu>\r\n );\r\n}\r\nimport React from 'react';\r\nimport { PopupMenu } from '@codeshumon/popup-menu';\r\n\r\nfunction App() {\r\n return (\r\n <PopupMenu\r\n trigger={<button>Custom Position</button>}\r\n position=\"top-center\"\r\n viewportPadding={20}\r\n enableScroll={true}\r\n noDefaultStyle={false}\r\n theme=\"light\"\r\n onOpenChange={(isOpen) => console.log('Menu is:', isOpen)}\r\n onClose={() => console.log('Menu closed')}\r\n >\r\n <div>Item 1</div>\r\n <div>Item 2</div>\r\n <div>Item 3</div>\r\n </PopupMenu>\r\n );\r\n}\r\nimport React from 'react';\r\nimport { PopupMenu } from '@codeshumon/popup-menu';\r\n\r\nfunction App() {\r\n return (\r\n <PopupMenu\r\n trigger={<button>Hover Over Me</button>}\r\n hoverTrigger={true}\r\n animation=\"in\"\r\n position=\"right-center\"\r\n >\r\n <div>Fades in from the left</div>\r\n <div>Item 2</div>\r\n </PopupMenu>\r\n );\r\n}\r\nimport React from 'react';\r\nimport { PopupMenu } from '@codeshumon/popup-menu';\r\n\r\nfunction App() {\r\n return (\r\n <PopupMenu\r\n trigger={<button>Custom Styled Menu</button>}\r\n noDefaultStyle={true}\r\n 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\"\r\n position=\"bottom-right\"\r\n >\r\n <div className=\"px-3 py-2 hover:bg-blue-700 cursor-pointer\">Option 1</div>\r\n <div className=\"px-3 py-2 hover:bg-blue-700 cursor-pointer\">Option 2</div>\r\n <div className=\"px-3 py-2 hover:bg-blue-700 cursor-pointer\">Option 3</div>\r\n </PopupMenu>\r\n );\r\n}\r\n| Prop | \r\nType | \r\nDefault | \r\nDescription | \r\n
|---|---|---|---|
trigger | \r\n React.ReactNode | \r\nRequired | \r\nThe element that triggers the popup menu | \r\n
children | \r\n React.ReactNode | \r\nRequired | \r\nMenu items/content | \r\n
header | \r\n React.ReactNode | \r\nundefined | \r\nOptional header content | \r\n
footer | \r\n React.ReactNode | \r\nundefined | \r\nOptional footer content | \r\n
className | \r\n string | \r\n\"\" | \r\nAdditional CSS class for the wrapper | \r\n
menuClassName | \r\n string | \r\n\"\" | \r\nAdditional CSS class for the menu. When noDefaultStyle is true, this class is applied without any default styling, giving you complete control over the menu appearance. | \r\n
position | \r\n PositionType | \r\n\"auto\" | \r\nMenu position relative to trigger | \r\n
onOpenChange | \r\n (open: boolean) => void | \r\nundefined | \r\nCallback when menu opens/closes | \r\n
onClose | \r\n () => void | \r\nundefined | \r\nCallback when menu closes | \r\n
animationDuration | \r\n number | \r\n200 | \r\nAnimation duration in milliseconds | \r\n
viewportPadding | \r\n number | \r\n5 | \r\nMinimum padding from viewport edges in pixels | \r\n
enableScroll | \r\n boolean | \r\nfalse | \r\nWhether to allow scrolling when menu is open | \r\n
noDefaultStyle | \r\n boolean | \r\nfalse | \r\nDisable default styling for menu items. When true, only the menuClassName is applied, allowing complete CSS customization. Essential positioning styles are maintained inline. | \r\n
theme | \r\n 'dark' | 'light' | \r\n'light' | \r\nColor theme for the menu | \r\n
hoverTrigger | \r\n boolean | \r\nfalse | \r\nOpens the menu on hover instead of on click | \r\n
animation | \r\n 'scale' | 'in' | 'out' | \r\n'scale' | \r\nSpecifies the type of animation ('scale', 'in', 'out') | \r\n
The position prop accepts the following values:
| Position | \r\nDescription | \r\nExample | \r\n
|---|---|---|
\"auto\" | \r\n Automatically chooses the best position | \r\nSmart positioning based on available space | \r\n
\"top-left\" | \r\n Above the trigger, aligned to left | \r\nMenu appears above and left-aligned | \r\n
\"top-center\" | \r\n Above the trigger, centered | \r\nMenu appears above and centered | \r\n
\"top-right\" | \r\n Above the trigger, aligned to right | \r\nMenu appears above and right-aligned | \r\n
\"bottom-left\" | \r\n Below the trigger, aligned to left | \r\nMenu appears below and left-aligned | \r\n
\"bottom-center\" | \r\n Below the trigger, centered | \r\nMenu appears below and centered | \r\n
\"bottom-right\" | \r\n Below the trigger, aligned to right | \r\nMenu appears below and right-aligned | \r\n
\"left-top\" | \r\n Left of the trigger, aligned to top | \r\nMenu appears to the left and top-aligned | \r\n
\"left-center\" | \r\n Left of the trigger, centered | \r\nMenu appears to the left and centered | \r\n
\"left-bottom\" | \r\n Left of the trigger, aligned to bottom | \r\nMenu appears to the left and bottom-aligned | \r\n
\"right-top\" | \r\n Right of the trigger, aligned to top | \r\nMenu appears to the right and top-aligned | \r\n
\"right-center\" | \r\n Right of the trigger, centered | \r\nMenu appears to the right and centered | \r\n
\"right-bottom\" | \r\n Right of the trigger, aligned to bottom | \r\nMenu appears to the right and bottom-aligned | \r\n
This package includes full TypeScript type definitions:
\r\nimport { PopupMenu, PopupMenuProps, PositionType } from '@codeshumon/popup-menu';\r\n\r\nconst menuProps: PopupMenuProps = {\r\n trigger: <button>Menu</button>,\r\n children: <div>Menu Item</div>,\r\n position: 'bottom-right' as PositionType,\r\n theme: 'dark',\r\n enableScroll: true,\r\n onOpenChange: (isOpen) => console.log(isOpen),\r\n};\r\n\r\n// Usage in component\r\nfunction MyComponent() {\r\n return (\r\n <PopupMenu {...menuProps} />\r\n );\r\n}\r\nThis library is compatible with:
\r\nContributions are welcome! Please feel free to submit a Pull Request.
\r\ngit checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
\r\n\r\nMIT © codeshumon
","readmeFilename":"README.md"}