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

Animated hamburger menu icons for React.js weighs only 1.5 KB.
https://github.com/cyntler/hamburger-react

animation animations burger burger-menu hamburger hamburger-menu hooks icon icons menu navigation react reactjs sidebar toggle transition transitions

Last synced: about 1 month ago
JSON representation

Animated hamburger menu icons for React.js weighs only 1.5 KB.

• Host: GitHub
• URL: https://github.com/cyntler/hamburger-react
• Owner: cyntler
• License: mit
• Created: 2015-04-27T13:04:17.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-02-28T10:13:58.000Z (6 months ago)
• Last Synced: 2024-04-10T00:48:54.640Z (5 months ago)
• Topics: animation, animations, burger, burger-menu, hamburger, hamburger-menu, hooks, icon, icons, menu, navigation, react, reactjs, sidebar, toggle, transition, transitions
• Language: TypeScript
• Homepage: https://hamburger-react.netlify.app
• Size: 4.81 MB
• Stars: 892
• Watchers: 5
• Forks: 32
• Open Issues: 7
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
‌



  



‌



Animated hamburger menu icons for React




Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as possible. This means no JavaScript animations, no transitions on non-cheap properties and a small size.



## Installation

```sh

npm install hamburger-react

```

## Size

When using one hamburger, ~1.5 KB will be added to your bundle (min + gzip).

## Usage

[Visit the website](https://hamburger-react.netlify.app) for full documentation, API and examples. A basic implementation looks as follows:

```js

import Hamburger from 'hamburger-react'

```

```js

const [isOpen, setOpen] = useState(false)

```

```jsx

```

Or without providing your own state:

```jsx

 ...} />

```

## Yet another hamburger library?

Yes. Since the creation of these burgers in 2015 a lot of similar ones have appeared, with one or more of the following downsides:

- Animations that don't feel natural

- Transitions on expensive properties (jerky animations)

- No React support

- Size (additional dependencies besides React or no tree shaking)

- Not customizable, or too customizable (no sensible defaults)

- Doing too much

## Accessibility

It is recommended to have a tap/click area of at least 48x48 pixels. Therefore, padding will be added around the icon to create a surface of exactly this size.

Keyboard interaction is provided with the `enter` key, and the icon element has the recommended accessibility attributes (such as `role`). You can use the `label` property to supply an ARIA label for the icon.

## Support

The icons are hooks-based, and will work with React 16.8.0 ('the one with hooks') or higher.