A clean, simple and easy to use library
yarn add react-menu-hamburger
or
npm i react-menu-hamburguer
import React from "react";
import MenuHamburger from "react-menu-hamburger";
export default function MyAwesomeComponent() {
return <MenuHamburger config={...yourConfig} />
}
Configure Menu Hamburger by passing an options object as the argument of the initialize method. Default values are:
<MenuHamburger config={{
size: 30,
lineWidth: 3,
menuClassName: null,
menuIconClassName: null,
transition: 'all .2s ease-in-out',
backgroundColor: 'white',
borderRadius: '8px',
iconColor: '#444',
initOpened: false
}} />
Receives the Menu Hamburger width and height
required: false
type: number
Allowed values: any number
Default value: 30
Receives the Menu line width
required: false
type: number
Allowed values: any number
Default value: 3
Receives the class to apply on the Menu Node
required: false
type: string
Allowed values: any valid HTML class string
Default value: null
Receives the class to apply on the Menu Node Icon
required: false
type: string
Allowed values: any valid HTML class string
Default value: null
Receives the custom Css transition
required: false
type: string
Allowed values: any valid value to Css property transition
Default value: all .2s ease-in-out
Receive the Background Color of Menu
required: false
type: string
Allowed values: any Css color
Default value: white
Receive the Menu border radius
required: false
type: string
Allowed values: any Css size
Default value: 8px
Receive the Menu Icon color
required: false
type: string
Allowed values: any Css color
Default value: #444
Defines whether the menu should start open or closed, where true means start open and false means start closed
required: false
type: boolean
Allowed values: true
false
Default value: false
Menu exposes API methods that can be used to control the Menu externally. Example usage:
import React, { useState, useEffect } from "react";
import MenuHamburger from "react-menu-hamburger";
export default function MyAwesomeComponent() {
const [menu, setMenu] = useState(null)
return(
<>
<MenuHamburger menuRef={setMenu} config={...yourConfig} />
<button onClick={() => menu && menu.toggle()}>Touch me to toggle menu</button>
</>
)
}
Opens the Menu if it is closed or closes if it is open
Open Menu
Close Menu
Destroys the current instance of the Menu
Menu exposes custom events that can be hooked on to. Example usage:
import React, { useState } from "react";
import MenuHamburger from "react-menu-hamburger";
export default function MyAwesomeComponent() {
const [menu, setMenu] = useState(null)
useEffect(() => {
if(menu){
menu.on("toggle", () => {
console.log("The menu state has changed")
})
}
}, [])
return(
<MenuHamburger menuRef={setMenu} config={...yourConfig} />
)
}
This function is called when the Menu is initialized
This function is called when the Menu is closed or opened
This function is called when the Menu is opened
This function is called when the Menu is closed
This function is called when the Menu is destroyed
The menu exposes custom events that can be used to remove an event listener. Example of use:
import React, { useState, useEffect } from "react";
import MenuHamburger from "react-menu-hamburger";
export default function MyAwesomeComponent() {
const [menu, setMenu] = useState(null)
useEffect(() => {
if(menu){
menu.on("toggle", () => {
console.log("An event listener has been added")
})
menu.off("toggle", () => {
console.log("And down here I removed the event listener, so nothing will happen ._.")
})
}
}, [])
return(
<MenuHamburger menuRef={setMenu} config={...yourConfig} />
)
}
Remove the init event listener
Remove the toggle event listener
Remove the open event listener
Remove the close event listener
Remove the destroy event listener