Hamburger React

import Hamburger from "hamburger-react";

import { Cross, Spin, Fade, Tilt, Rotate } from "hamburger-react";

const Hamburger = require("hamburger-react").default;
const { Cross, Spin, Fade } = require("hamburger-react");

import React, { useState } from "react";
import Hamburger from "hamburger-react";

function App() {
  const [isOpen, setOpen] = useState(false);
  
  return (
    <Hamburger toggled={isOpen} toggle={setOpen} />
  );
}

import Hamburger from "hamburger-react";

function App() {
  return (
    <Hamburger onToggle={toggled => console.log('Hamburger is', toggled ? 'open' : 'closed')} />
  );
}

/**
 * Default hamburger component with Tilt animation
 */
declare const Hamburger: React.FunctionComponent<CommonBurgerProps>;

export default Hamburger;

/**
 * Cross animation - Simple X formation using 2 lines
 */
export const Cross: React.FunctionComponent<CommonBurgerProps>;

/**
 * Divide animation - Lines divide and separate
 */
export const Divide: React.FunctionComponent<CommonBurgerProps>;

/**
 * Fade animation - Lines fade in/out transition
 */
export const Fade: React.FunctionComponent<CommonBurgerProps>;

/**
 * Pivot animation - Lines pivot around center point
 */
export const Pivot: React.FunctionComponent<CommonBurgerProps>;

/**
 * Rotate animation - Entire burger rotates transformation
 */
export const Rotate: React.FunctionComponent<CommonBurgerProps>;

/**
 * Slant animation - Lines slant into formation
 */
export const Slant: React.FunctionComponent<CommonBurgerProps>;

/**
 * Sling animation - Lines sling/swing motion
 */
export const Sling: React.FunctionComponent<CommonBurgerProps>;

/**
 * Spin animation - Spinning rotation animation
 */
export const Spin: React.FunctionComponent<CommonBurgerProps>;

/**
 * Spiral animation - Spiral motion transformation
 */
export const Spiral: React.FunctionComponent<CommonBurgerProps>;

/**
 * Squash animation - Squashing/compressing effect
 */
export const Squash: React.FunctionComponent<CommonBurgerProps>;

/**
 * Squeeze animation - Squeezing motion
 */
export const Squeeze: React.FunctionComponent<CommonBurgerProps>;

/**
 * Tilt animation - Tilts 90 degrees with lines forming X
 */
export const Tilt: React.FunctionComponent<CommonBurgerProps>;

/**
 * Turn animation - Turning motion animation
 */
export const Turn: React.FunctionComponent<CommonBurgerProps>;

/**
 * Twirl animation - Twirling motion effect
 */
export const Twirl: React.FunctionComponent<CommonBurgerProps>;

import { Cross, Spin, Fade } from "hamburger-react";
import { useState } from "react";

function NavigationMenu() {
  const [isOpen, setOpen] = useState(false);
  
  return (
    <div>
      {/* Different animation styles */}
      <Cross toggled={isOpen} toggle={setOpen} />
      <Spin toggled={isOpen} toggle={setOpen} color="#ff6b6b" />
      <Fade 
        toggled={isOpen} 
        toggle={setOpen}
        size={40}
        duration={0.6}
        rounded
      />
    </div>
  );
}

import { Dispatch, SetStateAction } from 'react';

export interface CommonBurgerProps {
  /** The color of the icon bars, accepts any CSS-parsable argument. */
  color?: string;
  /** The animation direction of the icon, left or right. */
  direction?: 'left' | 'right';
  /** The vertical distance between the lines. Small (sm), medium (md) or large (lg). */
  distance?: 'sm' | 'md' | 'lg';
  /** The duration of the animation. Can be set to zero if no animation is desired. */
  duration?: number;
  /** A valid `transition-timing-function` CSS value, for example 'ease-out'. */
  easing?: string;
  /** Hides the default browser focus style. */
  hideOutline?: boolean;
  /** An ARIA label to improve accessibility. */
  label?: string;
  /** A callback which receives a single boolean argument, indicating if the icon is toggled. */
  onToggle?: (toggled: boolean) => any;
  /** Specifies if the icon bars should be rounded. */
  rounded?: boolean;
  /** A number between 12 and 48, which sets the size of the icon. */
  size?: number;
  /** A way to provide your own state action. Has to be used together with a state value (the `toggled` prop). */
  toggle?: Dispatch<SetStateAction<boolean>>;
  /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
  toggled?: boolean;
  /** Specifies if the hamburger should be disabled. */
  disabled?: boolean;
  /** Specifies if the hamburger should run animation when mounted. */
  animateOnMount?: boolean;
}

import Hamburger from "hamburger-react";

function CustomizedHamburger() {
  const [isOpen, setOpen] = useState(false);
  
  return (
    <Hamburger
      toggled={isOpen}
      toggle={setOpen}
      color="#2563eb"
      size={36}
      duration={0.8}
      easing="ease-in-out"
      distance="lg"
      rounded
      direction="right"
      label="Toggle navigation menu"
      hideOutline={false}
      disabled={false}
      animateOnMount={true}
      onToggle={(toggled) => {
        console.log('Menu is now', toggled ? 'open' : 'closed');
        // Additional side effects
      }}
    />
  );
}

Burger

BurgerProps

import { CSSProperties, ReactNode } from 'react';

/**
 * Base burger component with custom render function
 */
export interface BurgerProps extends CommonBurgerProps {
  render: (o: RenderOptions) => ReactNode;
  lines?: number;
}

/**
 * Options object passed to custom render functions
 */
export interface RenderOptions {
  barHeight: number;
  barStyles: CSSProperties;
  burgerStyles: CSSProperties;
  handler: () => void;
  isLeft: boolean;
  isToggled: boolean;
  label: string | undefined;
  margin: number;
  move: number;
  time: number;
  easing: string;
  topOffset: number;
  width: number;
}

import { Dispatch, SetStateAction, CSSProperties, ReactNode } from 'react';