🍔 rice-burger

A collection of animated hamburger menu icons for React applications. Transform your boring menu buttons into delightful, customizable hamburger animations.

Features

• 🎨 8 Different Styles - From classic to creative designs
• ⚡ Smooth Animations - Configurable transition speeds
• 🎯 TypeScript Support - Full type definitions included
• 🎨 Customizable - Colors, sizes, border radius, and timing
• 📦 Zero Dependencies - Self-contained with inline styles
• 🚀 React 19 Ready - Built with the latest React

Installation

npm install @whim/rice-burger
# or
yarn add @whim/rice-burger
# or
bun add @whim/rice-burger

Quick Start

import { NormalHamburger } from '@whim/rice-burger';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <NormalHamburger
      isOpen={isOpen}
      onClick={() => setIsOpen(!isOpen)}
    />
  );
}

Available Components

Classic Hamburgers

NormalHamburger

The classic three-line hamburger that transforms into an X.

<NormalHamburger isOpen={isOpen} onClick={toggle} />

LeftHamburger | RightHamburger | CenterHamburger

Variations with the middle bar positioned differently for unique visual effects.

<LeftHamburger isOpen={isOpen} onClick={toggle} />
<RightHamburger isOpen={isOpen} onClick={toggle} />
<CenterHamburger isOpen={isOpen} onClick={toggle} />

Dashed Hamburgers

LeftDashedHamburger | RightDashedHamburger

Hamburgers with a dashed middle line for a more distinctive look.

<LeftDashedHamburger isOpen={isOpen} onClick={toggle} />
<RightDashedHamburger isOpen={isOpen} onClick={toggle} />

Box Hamburgers

CandyBoxHamburger | ChocolateBoxHamburger

Creative 3×3 grid of dots that transform into an X - perfect for modern, playful designs.

<CandyBoxHamburger isOpen={isOpen} onClick={toggle} />
<ChocolateBoxHamburger isOpen={isOpen} onClick={toggle} />

Props

All components share the same prop interface:

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Controls the open/closed state | | onClick | () => void | required | Click handler function | | radius | string | "0px" | Border radius of the container | | bgColor | string | "black" | Background color of the container | | barColor | string | "white" | Color of the hamburger bars/dots | | transitionSpeed | string | "0.5s" | Animation duration |

Customization Examples

Rounded with Custom Colors

<NormalHamburger
  isOpen={isOpen}
  onClick={toggle}
  radius="12px"
  bgColor="#3b82f6"
  barColor="#ffffff"
  transitionSpeed="0.3s"
/>

Dark Theme

<CandyBoxHamburger
  isOpen={isOpen}
  onClick={toggle}
  bgColor="#1f2937"
  barColor="#f9fafb"
  radius="8px"
/>

Fast Animation

<LeftDashedHamburger
  isOpen={isOpen}
  onClick={toggle}
  transitionSpeed="0.2s"
/>

TypeScript

The package includes full TypeScript definitions. The main prop interface is:

interface HamburgerProps {
  isOpen: boolean;
  onClick: () => void;
  radius?: string;
  bgColor?: string;
  barColor?: string;
  transitionSpeed?: string;
}

Development

Setup

bun install

Build

bun run build

Watch Mode

bun run dev

Browser Support

Works in all modern browsers that support:

• CSS Grid (for box hamburgers)
• CSS Transforms
• CSS Transitions
• React 16.8+ (hooks)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-hamburger)
3. Commit your changes (git commit -m 'Add amazing hamburger')
4. Push to the branch (git push origin feature/amazing-hamburger)
5. Open a Pull Request

License

MIT License - feel free to use in your projects!