Registry / web-framework / hamburger-react

hamburger-react

library2.5.2jsnpmunverified

hamburger-react provides a collection of animated hamburger menu icons specifically designed for React applications. It focuses on performance and elegance, utilizing CSS-driven transitions on 'cheap' properties to avoid jerky animations, differentiating itself from libraries that use JavaScript for animations or transition expensive CSS properties. The current stable version is 2.5.2, with releases occurring periodically to support new React versions and add minor features or accessibility improvements. Key differentiators include its small bundle size (~1.5 KB min+gzip per hamburger), hooks-based implementation (requiring React 16.8.0+), robust accessibility features (ARIA labels, keyboard interaction, recommended tap area), and a focused API that avoids over-customization while providing sensible defaults. It supports React 16.8 through 19 via peer dependencies.

web-framework

npm install hamburger-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · HAMBURGER-REACT

hamburger-react

web-frameworkjavascriptv2.5.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Hamburger

✓ import Hamburger from 'hamburger-react'

✗ import { Hamburger } from 'hamburger-react'

The primary component is a default export, not a named export.

Hamburger component with state

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

✗ const Hamburger = require('hamburger-react');

This library is primarily designed for ESM environments with React hooks. CommonJS `require` is not the idiomatic way to use it, especially given its hooks-based nature.

Type definitions

✓ import type { BurgerProps } from 'hamburger-react'

Import `BurgerProps` for TypeScript type hinting when extending or passing props.

Demonstrates a basic setup of the Hamburger component, integrating it with React's `useState` hook for toggling, and showcasing various common props for customization and accessibility.

import Hamburger from 'hamburger-react'; import { useState } from 'react'; const MyMenuToggle = () => { // Manage the open/closed state of the menu const [isOpen, setOpen] = useState(false); // Render the Hamburger component, binding its state to the component's state // This allows external control over the hamburger's toggled state. return ( <div> <button aria-label="Toggle menu" onClick={() => setOpen(!isOpen)} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }} > <Hamburger toggled={isOpen} toggle={setOpen} size={24} duration={0.8} label="Show navigation" hideOutline={false} direction="left" distance="lg" easing="ease-in" rounded /> </button> {isOpen && ( <nav style={{ padding: '20px', backgroundColor: '#f0f0f0', border: '1px solid #ccc' }}> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> )} </div> ); }; export default MyMenuToggle;

Debug

Known issues

breakingThe default color of the hamburger icon was changed to utilize `currentColor`, which inherits the text color of its parent element. This might alter the appearance of existing icons if a specific `color` prop was not previously set.

fix

If the previous default color is desired, explicitly set the `color` prop on the `Hamburger` component (e.g., `<Hamburger color="#000" />`) or ensure its parent element has the desired text color.

affects: >=2.0.0

breakingSupport for the deprecated `KeyboardEvent.keyCode` property was removed. Only `KeyboardEvent.key` is now supported for keyboard interaction.

fix

Ensure that any custom keyboard event handlers or accessibility integrations rely on `KeyboardEvent.key` for cross-browser compatibility and modern standards. This change primarily affects internal library handling, but developers integrating deeply with keyboard events should be aware.

affects: >=2.3.0

gotchaThe library is hooks-based and requires React 16.8.0 or higher. Using it with older React versions will result in runtime errors due to missing hooks functionality.

fix

Upgrade your project's React version to `^16.8 || ^17 || ^18 || ^19` as specified in the peer dependencies. Ensure all other React-related packages are compatible with the updated React version.

affects: <16.8.0

gotchaFor optimal accessibility, the library internally adds padding to create a tap/click area of at least 48x48 pixels. Be mindful of this when designing layouts around the hamburger icon, as it might occupy more space than just the visual icon itself.

fix

Account for the default padding when calculating spacing or positioning. If custom styling is applied that interferes with this, ensure the resulting interactive area still meets accessibility guidelines.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: (0, react__WEBPACK_IMPORTED_MODULE_0__.useState) is not a function

Using `hamburger-react` with an older version of React that does not support hooks (i.e., less than React 16.8.0).

fix

Update your `react` and `react-dom` packages to version 16.8.0 or higher. For example, `npm install react@latest react-dom@latest`.

Module not found: Error: Can't resolve 'hamburger-react' in '...' or Attempted import error: 'Hamburger' is not exported from 'hamburger-react'.

Incorrect import statement for the `Hamburger` component. It is a default export, not a named export.

fix

Change `import { Hamburger } from 'hamburger-react'` to `import Hamburger from 'hamburger-react'`.

Upgrade

Version history

2.5.2latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for the React component and hooks API.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/luukdv/hamburger-react ↗

packagehttps://www.npmjs.com/package/hamburger-react ↗

homepagehttps://hamburger-react.netlify.app ↗