React Stagger Menu

A responsive animated menu component for React with staggered animations and a visual menu builder.

Installation

npm install react-stagger-menu
# or
yarn add react-stagger-menu

Features

• Responsive design that works on all screen sizes
• Customizable colors and styling
• Staggered animation effects using GSAP
• Visual menu builder for easy customization
• TypeScript support
• Multiple positioning options
• Customizable menu items

Usage

import React from 'react';
import { StaggerMenu } from 'react-stagger-menu';

const App = () => {
  const menuItems = [
    { id: 1, label: 'Frame shape', onClick: () => console.log('Frame shape clicked') },
    { id: 2, label: 'Frame color', onClick: () => console.log('Frame color clicked') },
    { id: 3, label: 'Fabric', onClick: () => console.log('Fabric clicked'), active: true },
    { id: 4, label: 'Else', onClick: () => console.log('Else clicked') },
    { id: 5, label: 'Frodo', onClick: () => console.log('Frodo clicked') },
  ];

  return (
    <div className="app">
      <StaggerMenu
        items={menuItems}
        position="top-right"
        primaryColor="#FF5722"
        onMenuToggle={(isOpen) => console.log('Menu is open:', isOpen)}
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | MenuItem[] | Required | Array of menu items to display | | position | 'center' \| 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | 'center' | Position of the menu button | | primaryColor | string | '#CC0000' | Primary color for the menu button and active items | | textColor | string | '#333' | Text color for menu items | | hoverBgColor | string | 'rgba(0, 0, 0, 0.52)' | Background color on hover | | hoverTextColor | string | 'white' | Text color on hover | | bgColor | string | '#f9f9f9' | Background color for menu items | | className | string | '' | Additional CSS class for the menu | | buttonSize | 'small' \| 'medium' \| 'large' | 'medium' | Size of the menu button | | onMenuToggle | (isOpen: boolean) => void | undefined | Callback when menu is toggled |

MenuItem Interface

interface MenuItem {
  id: string | number;
  label: string;
  onClick?: () => void;
  active?: boolean;
}

Menu Builder

The package includes a visual menu builder component that allows you to create and customize your menu without writing code.

import React from 'react';
import { MenuBuilder } from 'react-stagger-menu';

const App = () => {
  const handleConfigChange = (config) => {
    console.log('Current menu configuration:', config);
  };

  const handleCodeGenerate = (code) => {
    console.log('Generated code:', code);
    // You could save this to a file or display it to the user
  };

  return (
    <div className="app">
      <h1>Create Your Menu</h1>
      <MenuBuilder
        onConfigChange={handleConfigChange}
        onCodeGenerate={handleCodeGenerate}
      />
    </div>
  );
};

export default App;

MenuBuilder Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialConfig | Partial<StaggerMenuProps> | {} | Initial configuration for the menu | | onConfigChange | (config: StaggerMenuProps) => void | undefined | Callback when configuration changes | | onCodeGenerate | (code: string) => void | undefined | Callback when code is generated |

Features of the Menu Builder

• Visual Editor: See your changes in real-time
• Item Management: Add, remove, and reorder menu items
• Appearance Customization: Change colors, position, and size
• Code Generation: Get ready-to-use React code

License

GPL-3.0