React Menu popup

Simple React Menu popup

How to use

import MenuPopup from 'react-menu-popup'
import 'react-menu-popup/lib/react-menu-popup.css'

let menuData = [
            {
                name:"Hot Chocolate",
                value:1
            },
            {
                name:"Cookie Ice Cream",
                value:2
            },
            {
                name:"Ice Matcha Latte",
                value:3
            }
        ]

let handleItemClick = (item)=>{
    console.log(item);
}        


<MenuPopup
        defaultValue={2}
        items = {menuData} 
        labelKey ='name' 
        valueKey = 'value'
        inputRef={(el) => { this.inputEl = el }}
        menuRef = { (menuEl) => { this.menuEl = menuEl } }
        onItemClick = { (item) => handleItemClick(item)}
        direction = 'up'  // 'down' (default) or null
        offsetX = {20}  //20px, optional
        offsetY = {-5}  //-5px, optional
        minWidth = {200}  //minWidth:200px, optional

        
    />

When specify the children inside MenuPopup, this will work as a normal popup menu, it will not work as a select element.

let onOpen = (menuEl) =>{ ... }

let onClose = () => { ... }

...
    <MenuPopup 
            items = {menuData} 
            onItemClick = { (item)=> this.onMenuItemClick(item)}
            labelKey = 'name'
            direction = 'up'
            align ='right' // 'left' (default)
            onOpen = { onOpen }
            onClose  = { onClose } 
        >
        <span>Click here </span>
    </MenuPopup>

Prevent close the popup on item click:

let menuData = [
            {
                name:"Hot Chocolate",
                value:1
            },
            {
                name:"Cookie Ice Cream",
                value:2,
                keepOpen:true
            },
            {
                name:"Ice Matcha Latte",
                value:3
            }
        ]

Pass in the menu item as custom component

let menuData = [
            {
                name:"Hot Chocolate",
                value:1
            },
            {
                component: <div>
                                You can put whatever your custom component here, instead of div
                            </div>,
                keepOpen:true
            },
            {
                name:"Ice Matcha Latte",
                value:3
            }
        ]

Show Filter: this will show an input, let you filter the dropdown list

     <MenuPopup 
            items = {menuData} 
            onItemClick = { (item)=> this.onMenuItemClick(item)}
            getItemText = { item => item.name }  //this will override the labelKey
            showFilter = { true }  //default false
            filterFn = { (item, text) => { return item.name.startsWith(text)} } // you can passcustom filter function here
        >
        <span>Click here </span>
    </MenuPopup>

If you got any issues, or want additional features, just let me know. [e-mail] skype: thaihn_85