Emoji Compatibility Checker

Build a React component that displays an emoji picker with platform compatibility filtering. The component should allow users to select which emoji standard version to support, ensuring that only emojis compatible with older platforms are shown.

Requirements

Your component should:

1. Display an emoji picker that filters emojis based on Unicode version compatibility
2. Provide a dropdown or similar UI control to let users select a target emoji version (options: "0.6", "1.0", "2.0", "3.0", "4.0", "5.0")
3. Update the emoji picker in real-time when the version selection changes
4. Display the currently selected emoji version prominently
5. When an emoji is selected, display the emoji character and its name

Implementation Details

• Create a React component named EmojiCompatibilityChecker
• The component should use React hooks for state management
• The version selector should have a clear label indicating its purpose
• Selected emoji information should be displayed in a dedicated area

@generates

API

export interface EmojiCompatibilityCheckerProps {
  defaultVersion?: string;
}

export function EmojiCompatibilityChecker(props: EmojiCompatibilityCheckerProps): JSX.Element;

Test Cases

• When version "1.0" is selected, only emojis from Unicode 1.0 and earlier appear in the picker @test
• When the version changes from "5.0" to "2.0", the emoji picker updates to show fewer emojis @test
• When an emoji is clicked, both the emoji character and its name are displayed @test

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides emoji picker functionality with version filtering support.

react { .dependency }

UI framework for building the component.