Customizable Emoji Category Manager

Build a React component that displays an emoji picker with customizable category navigation and behavior.

Requirements

Create a React component named CustomEmojiPicker that renders an emoji picker with the following customizations:

Category Organization

The emoji picker should display only specific categories in a custom order:

• Food & Drink (shown first)
• Animals & Nature (shown second)
• Activities (shown third)
• Travel & Places (shown fourth)

All other emoji categories should be hidden from the picker.

Category Display Names

Override the default category names with custom labels:

• "Food & Drink" → "Yummy"
• "Animals & Nature" → "Wildlife"
• "Activities" → "Fun Stuff"
• "Travel & Places" → "Destinations"

Emoji Selection

When a user clicks on an emoji, log the selected emoji character and its category name to the console.

Component Export

Export the CustomEmojiPicker component as the default export from src/CustomEmojiPicker.tsx.

Implementation

@generates

API

import React from 'react';

/**
 * A customizable emoji picker component with category navigation controls
 */
export default function CustomEmojiPicker(): JSX.Element;

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides emoji picker functionality with category navigation support.

@satisfied-by

React { .dependency }

Provides the React framework for building the component.

@satisfied-by

Test Cases

• The picker displays exactly 4 categories in the correct custom order @test
• Category names are displayed with custom labels: "Yummy", "Wildlife", "Fun Stuff", "Destinations" @test
• When an emoji is clicked, the emoji character is logged to the console @test