Hamburger Menu Button for React

A simple & easy to use react Hamburger menu.

Installation

Requires React 16 or later

npm i --save @aiherrera/react-hamburger

# or

yarn add @aiherrera/react-hamburger

Demo

You can check all the configurations in Ai-CoderLab

Usage

{ Hamburger }

// ES5 syntax
const Hamburger = require('@aiherrera/react-hamburger')

// ES6 syntax
import Hamburger from '@aiherrera/react-hamburger'

Full example

import React from 'react'

import Hamburger from '@aiherrera/react-hamburger'

const App = () => {

  const [state, setState] = useState(false)

  const handleClick = () => {
    setState(!state)
  }

  return (
    <>
      <Hamburger
        handleClick={handleClick}
        isOpened={state}
      />
    </>
  )
}

Props

All these props are passed as defaults and can be overriden any time.

| Name | Type | Unit | Description | Default | | --------- | ------ | --------- | ------------------------------------------------ | -------- | | color | string | N/A | Color of the hamburger bars | #28282A | | size | string | N/A | Size of the hamburger | 'medium' | | direction | string | N/A | Where is located | 'right' | | device | string | N/A | In which devices is displayed the component | 'all' | | top | string | px/em/rem | Distance from the top | '10px' | | left | string | px/em/rem | Distance from the left | 'auto' | | right | string | px/em/rem | Distance from the right | 'auto' |