CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-emoji-picker-react

Emoji Picker component for React Applications on the web

74

1.00x
Overview
Eval results
Files

task.mdevals/scenario-2/

Emoji Style Selector App

Build a React application that allows users to preview and compare different emoji rendering styles side-by-side.

Requirements

Create a React component that displays multiple emoji pickers, each configured with a different emoji style. The application should:

  1. Display three emoji pickers simultaneously, each using a different style (Apple, Google, and Twitter)
  2. When a user clicks an emoji in any of the pickers, display the selected emoji character prominently at the top of the page
  3. Below the selected emoji, show the emoji rendered in all available styles (Apple, Google, Facebook, Twitter, and Native) in a horizontal row
  4. Each styled emoji should be labeled with its style name
  5. Include a "Reset" button that clears the current selection

The interface should make it easy to compare how the same emoji appears across different rendering styles.

Test Cases

The following test cases verify the core functionality:

  • Clicking an emoji in any picker updates the displayed selection @test
  • All five emoji style variants are shown for the selected emoji @test
  • The Reset button clears the selection and hides the comparison display @test

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides emoji picker components with configurable rendering styles.

Implementation

@generates

Install with Tessl CLI

npx tessl i tessl/npm-emoji-picker-react

tile.json