Xburger

Mobile menu with button for React. Made to supply the most basic functionality with minimal config, with the option to double as a close button because why not.

Example

1<Menu
2    onCloseClickOverride={
3    mapMode ? closeMap : undefined
4    }
5    shouldCloseOnClick={(e) => 
6        ['button', 'p'].includes(e.target.tagName.toLowerCase())
7    }
8    transitionTime={300}
9>
10    {locations.map((loc) => (
11        <button
12            key={loc.label} 
13            className="locationOption"
14            onClick={(e) => setLocation(i)}
15        >
16            {loc.label}
17        </button>
18    ))}
19    <button
20        className="addLocationButton"
21        onClick={createLocation}
22    >
23        <AddLocationIcon/>
24    </button>
25</Menu>

Props (optional)

• children: Menu items
• onCloseClickOverride: Replace the onClick function on the close button; as long as this prop exists the button is in the close mode
• shouldCloseOnClick: Function which receives the click event and should return a boolean to say whether the click should cause the menu to close
• transitionTime(default 400): Menu animation transition time in ms
• zIndexLow (default 2): the z-index of the menu backdrop. The menu itself is one z-index higher, and the button yet one higher.
• color (default white): color of the button icon
• bgColor (default hotpink): background color of the menu and button
• backdropColor (default #e3e6e850): color of the backdrop