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

Custom Theme Emoji Chat Input

Build a React component that provides an emoji picker with custom theming capabilities for a chat application.

Requirements

Create a chat input component that includes an emoji picker with the following features:

Theme Customization

  • Support three theme modes: light, dark, and system (auto)
  • Provide a theme selector dropdown that allows users to switch between themes
  • The selected theme should persist when the component re-renders
  • Apply the selected theme to the emoji picker

Emoji Selection

  • Display an emoji picker that opens when the user clicks an emoji button
  • When an emoji is selected, append it to the text input field at the current cursor position
  • The emoji picker should close after selecting an emoji

Chat Input

  • Provide a text input field for typing messages
  • Include a button to toggle the emoji picker visibility
  • Include a send button to submit messages

Visual Design

  • The emoji button should be clearly visible next to the input field
  • The theme selector should be easily accessible
  • The emoji picker should appear in a suitable position (e.g., above the input field)

Implementation

@generates

Create a React component that includes:

  • A text input for message entry
  • A button to toggle the emoji picker
  • A theme selector (dropdown or buttons)
  • The emoji picker configured with the selected theme
  • A send button for messages

The component should maintain the current theme selection and text input state.

Test Cases

  • When the user selects "light" theme, the emoji picker displays with a light theme @test
  • When the user selects "dark" theme, the emoji picker displays with a dark theme @test
  • When the user selects "auto" theme, the emoji picker displays with the system theme @test
  • When an emoji is clicked, it appears in the text input field @test

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides the emoji picker component with theming support.

React { .dependency }

UI framework for building the component.

Version

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