Animated Hamburger Menu Icons for React

Common errors

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

  cause 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'.

  cause 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'`.

Warnings

• breaking 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.
  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.
• breaking Support 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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install hamburger-react npm
• yarn add hamburger-react yarn
• pnpm add hamburger-react pnpm

Imports

• Hamburger
  wrong:

  import { Hamburger } from 'hamburger-react'

  correct:

  import Hamburger from 'hamburger-react'

  The primary component is a default export, not a named export.
• Hamburger component with state
  wrong:

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

  correct:

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

  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.

Quickstart

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;