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-8/

Message Composer with Emoji Support

Build a simple message composer component that allows users to write messages and insert emojis using an emoji picker.

Requirements

Create a React component called MessageComposer that:

  1. Message Input: Displays a textarea where users can type their message
  2. Emoji Picker Button: Provides a button that toggles an emoji picker interface
  3. Emoji Selection: When an emoji is selected from the picker, it should be inserted at the current cursor position in the textarea
  4. Picker Visibility: The emoji picker should be hidden by default and only visible when the button is clicked. Clicking the button again should hide the picker.
  5. Message Display: Below the textarea, display the current message content in a preview area

Functional Specifications

  • The textarea should have a minimum height of 100px
  • The emoji picker button should be labeled "Add Emoji"
  • When no message is entered, the preview should display "No message yet"
  • The emoji picker should appear below the button when toggled
  • After selecting an emoji, the picker should remain open (not automatically close)

Implementation

@generates

The component should be exported as the default export.

API

export default function MessageComposer(): JSX.Element;

Test Cases

  • Renders a textarea for message input @test
  • Renders an "Add Emoji" button @test
  • Initially hides the emoji picker @test
  • Shows the emoji picker when the button is clicked @test

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides emoji picker component for React applications.

Version

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