Animated hamburger menu icons for React

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.

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

npm install hamburger-react

Size

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

Usage

Visit the website for full documentation, API and examples. A basic implementation looks as follows:

import Hamburger from 'hamburger-react'
const [isOpen, setOpen] = useState(false)
<Hamburger toggled={isOpen} toggle={setOpen} />

Or without providing your own state:

<Hamburger onToggle={toggled => ...} />

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.

Download Details:

Author: luukdv

Demo: https://hamburger-react.netlify.app/

Source Code: https://github.com/luukdv/hamburger-react

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.