{"id":10991,"library":"hamburger-react","title":"Animated Hamburger Menu Icons for React","description":"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.","status":"active","version":"2.5.2","language":"javascript","source_language":"en","source_url":"https://github.com/luukdv/hamburger-react","tags":["javascript","hamburger","burger","menu","react","icon","icons","toggle","hooks","typescript"],"install":[{"cmd":"npm install hamburger-react","lang":"bash","label":"npm"},{"cmd":"yarn add hamburger-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add hamburger-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the React component and hooks API.","package":"react","optional":false}],"imports":[{"note":"The primary component is a default export, not a named export.","wrong":"import { Hamburger } from 'hamburger-react'","symbol":"Hamburger","correct":"import Hamburger from 'hamburger-react'"},{"note":"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.","wrong":"const Hamburger = require('hamburger-react');","symbol":"Hamburger component with state","correct":"import Hamburger from 'hamburger-react';\nimport { useState } from 'react';\n\nconst MyComponent = () => {\n const [isOpen, setOpen] = useState(false);\n return ;\n};"},{"note":"Import `BurgerProps` for TypeScript type hinting when extending or passing props.","symbol":"Type definitions","correct":"import type { BurgerProps } from 'hamburger-react'"}],"quickstart":{"code":"import Hamburger from 'hamburger-react';\nimport { useState } from 'react';\n\nconst MyMenuToggle = () => {\n // Manage the open/closed state of the menu\n const [isOpen, setOpen] = useState(false);\n\n // Render the Hamburger component, binding its state to the component's state\n // This allows external control over the hamburger's toggled state.\n return (\n
\n );\n};\n\nexport default MyMenuToggle;","lang":"typescript","description":"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."},"warnings":[{"fix":"If the previous default color is desired, explicitly set the `color` prop on the `Hamburger` component (e.g., ``) or ensure its parent element has the desired text color.","message":"The 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"Support for the deprecated `KeyboardEvent.keyCode` property was removed. Only `KeyboardEvent.key` is now supported for keyboard interaction.","severity":"breaking","affected_versions":">=2.3.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":"<16.8.0"},{"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.","message":"For 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update your `react` and `react-dom` packages to version 16.8.0 or higher. For example, `npm install react@latest react-dom@latest`.","cause":"Using `hamburger-react` with an older version of React that does not support hooks (i.e., less than React 16.8.0).","error":"TypeError: (0, react__WEBPACK_IMPORTED_MODULE_0__.useState) is not a function"},{"fix":"Change `import { Hamburger } from 'hamburger-react'` to `import Hamburger from 'hamburger-react'`.","cause":"Incorrect import statement for the `Hamburger` component. It is a default export, not a named export.","error":"Module not found: Error: Can't resolve 'hamburger-react' in '...' or Attempted import error: 'Hamburger' is not exported from 'hamburger-react'."}],"ecosystem":"npm"}