https://github.com/aiherrera/react-hamburger

A simple & easy to use react hamburger
https://github.com/aiherrera/react-hamburger

aih-public-showcase hamburger hamburger-menu react react-component

Last synced: about 13 hours ago
JSON representation

A simple & easy to use react hamburger

• Host: GitHub
• URL: https://github.com/aiherrera/react-hamburger
• Owner: aiherrera
• License: mit
• Created: 2021-02-27T04:55:16.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T02:02:01.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T14:22:42.277Z (23 days ago)
• Topics: aih-public-showcase, hamburger, hamburger-menu, react, react-component
• Language: TypeScript
• Homepage: https://coderlab.aiherrera.com/?path=/story/playground-react-components--hamburger-menu
• Size: 410 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://coderlab.aiherrera.com/?path=/story/playground-react-components--hamburger)

## Usage

`{ Hamburger }`

```

// ES5 syntax

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

// ES6 syntax

import Hamburger from '@aiherrera/react-hamburger'

```

### Full example

```TSX

import React from 'react'

import Hamburger from '@aiherrera/react-hamburger'

const App = () => {

  const [state, setState] = useState(false)

  const handleClick = () => {

    setState(!state)

  }

  return (

    <>

      

    >

  )

}

```

## 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'   |