CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-emoji-picker-react

tessl install tessl/npm-emoji-picker-react@4.13.0

Emoji Picker component for React Applications on the web

Agent Success

Agent success rate when using this tile

74%

Improvement

Agent success rate improvement when using this tile compared to baseline

1x

Baseline

Agent success rate without this tile

74%

task.mdevals/scenario-1/

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

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/emoji-picker-react@4.13.x
tile.json