Zeego menu components displayed on a large touchscreen in an office setting

Zeego: Unleashing the Power of Cross-Platform Menus in React

The Gray Cat
The Gray Cat

In the ever-evolving world of React and React Native development, creating consistent and native-feeling menus across different platforms can be a challenging task. Enter Zeego, a powerful library that aims to simplify this process by providing a unified API for building beautiful, native menus for both web and mobile applications.

Unleashing the Power of Cross-Platform Menus

Zeego brings a host of features that make it a standout choice for developers looking to implement menus in their React and React Native projects:

  • Seamless integration with Radix UI for web applications
  • Native menu elements for iOS and Android platforms
  • Unified API that works across all platforms
  • Compatibility with popular frameworks like Solito and Next.js
  • Support for Expo (with custom dev clients)
  • Unstyled components for maximum flexibility

Getting Started with Zeego

To begin your journey with Zeego, you’ll need to install the library and its peer dependencies. Let’s walk through the installation process step by step.

Installation

First, add Zeego to your project:

npm install zeego
# or
yarn add zeego

Next, install the necessary peer dependencies based on your target platforms:

For iOS:

npm install react-native-ios-context-menu react-native-ios-utilities
# or
yarn add react-native-ios-context-menu react-native-ios-utilities

For Android:

npm install @react-native-menu/menu
# or
yarn add @react-native-menu/menu

Setting Up for Different Frameworks

Zeego plays well with various React and React Native frameworks. Here’s how to set it up for some popular ones:

Expo

Expo users need to use a custom development client since Zeego uses native code. After installing the library and its peer dependencies, rebuild your custom development client:

expo run:ios -d

Then, run your app in dev mode:

npx expo start --dev-client

Next.js

For Next.js projects, add zeego to your next-transpile-modules in next.config.js:

// next.config.js
module.exports = {
  transpilePackages: ['zeego'],
  // ... other configurations
}

Vanilla React Native

For vanilla React Native projects, don’t forget to run pod install in your ios folder after installation.

Creating Menus with Zeego

Now that we have Zeego set up, let’s dive into creating menus. We’ll start with a basic example and then explore more advanced usage.

Basic Dropdown Menu

Let’s create a simple dropdown menu using Zeego:

import * as DropdownMenu from 'zeego/dropdown-menu'

function SimpleDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button title="Open Menu" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item key="item1">
          <DropdownMenu.ItemTitle>Option 1</DropdownMenu.ItemTitle>
        </DropdownMenu.Item>
        <DropdownMenu.Item key="item2">
          <DropdownMenu.ItemTitle>Option 2</DropdownMenu.ItemTitle>
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

In this example, we create a dropdown menu with two options. The DropdownMenu.Trigger component wraps the button that opens the menu, while DropdownMenu.Content contains the menu items.

Adding Icons and Submenus

Zeego allows you to enhance your menus with icons and submenus. Here’s an example of a more complex menu structure:

import * as DropdownMenu from 'zeego/dropdown-menu'

function AdvancedDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button title="Advanced Menu" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item key="item1">
          <DropdownMenu.ItemIcon ios={{ name: 'star.fill' }} />
          <DropdownMenu.ItemTitle>Starred</DropdownMenu.ItemTitle>
        </DropdownMenu.Item>
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger key="submenu">
            <DropdownMenu.ItemTitle>More Options</DropdownMenu.ItemTitle>
          </DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item key="subitem1">
              <DropdownMenu.ItemTitle>Sub Option 1</DropdownMenu.ItemTitle>
            </DropdownMenu.Item>
            <DropdownMenu.Item key="subitem2">
              <DropdownMenu.ItemTitle>Sub Option 2</DropdownMenu.ItemTitle>
            </DropdownMenu.Item>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

This example demonstrates how to add an icon to a menu item using DropdownMenu.ItemIcon and create a submenu using the DropdownMenu.Sub component.

Advanced Zeego Techniques

Let’s explore some more advanced features of Zeego to create even more powerful and flexible menus.

Customizing Menu Appearance

Zeego components are unstyled by default, allowing you to apply your own styles. Here’s how you can create custom styled components:

import * as DropdownMenu from 'zeego/dropdown-menu'
import { styled } from 'your-styling-library'

const StyledMenuItem = DropdownMenu.create(
  styled(DropdownMenu.Item)({
    height: 40,
    paddingHorizontal: 16,
    backgroundColor: '#f0f0f0',
  }),
  'Item'
)

function CustomStyledMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button title="Styled Menu" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <StyledMenuItem key="item1">
          <DropdownMenu.ItemTitle>Styled Option 1</DropdownMenu.ItemTitle>
        </StyledMenuItem>
        <StyledMenuItem key="item2">
          <DropdownMenu.ItemTitle>Styled Option 2</DropdownMenu.ItemTitle>
        </StyledMenuItem>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

Implementing Checkbox Items

Zeego supports checkbox items, allowing users to toggle options within the menu:

import * as DropdownMenu from 'zeego/dropdown-menu'
import { useState } from 'react'

function CheckboxMenu() {
  const [isChecked, setIsChecked] = useState(false)

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button title="Checkbox Menu" />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.CheckboxItem
          key="checkbox"
          value={isChecked ? 'on' : 'off'}
          onValueChange={(newValue) => setIsChecked(newValue === 'on')}
        >
          <DropdownMenu.ItemIndicator />
          <DropdownMenu.ItemTitle>Toggle Option</DropdownMenu.ItemTitle>
        </DropdownMenu.CheckboxItem>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

This example shows how to create a checkbox item within the menu, complete with a state that can be toggled.

Creating Context Menus

Zeego also provides support for context menus, which are typically triggered by right-clicking on desktop or long-pressing on mobile:

import * as ContextMenu from 'zeego/context-menu'

function ContextMenuExample() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        <View style={{ width: 200, height: 200, backgroundColor: 'lightblue' }}>
          <Text>Long press or right-click me</Text>
        </View>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item key="edit">
          <ContextMenu.ItemTitle>Edit</ContextMenu.ItemTitle>
        </ContextMenu.Item>
        <ContextMenu.Item key="delete">
          <ContextMenu.ItemTitle>Delete</ContextMenu.ItemTitle>
        </ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  )
}

This example demonstrates how to create a context menu that appears when the user interacts with a specific element.

Conclusion

Zeego offers a powerful and flexible solution for implementing menus in React and React Native applications. With its cross-platform compatibility, native feel, and extensive customization options, it simplifies the process of creating consistent and beautiful menus across web and mobile platforms.

By leveraging Zeego’s intuitive API and components, developers can create rich, interactive menu experiences that enhance user interaction and navigation in their applications. Whether you’re building a simple dropdown or a complex nested menu structure, Zeego provides the tools you need to bring your menu designs to life across all platforms.

As you continue to explore Zeego, you’ll discover even more ways to customize and extend its functionality to meet your specific project requirements. Happy menu building!

Comments