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

rubric.jsonevals/scenario-1/

{
  "context": "This criteria evaluates how effectively the engineer uses the emoji-picker-react package's programmatic open/close control feature (the 'open' prop) to implement a dropdown emoji picker. The focus is on proper usage of the package's visibility control API and the onEmojiClick callback handler.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Uses open prop",
      "description": "The implementation uses the 'open' prop on the EmojiPicker component to control visibility state (e.g., <EmojiPicker open={isOpen} />)",
      "max_score": 30
    },
    {
      "name": "State management",
      "description": "The implementation maintains state (e.g., using useState) to track whether the picker should be open or closed, and passes this state to the 'open' prop",
      "max_score": 20
    },
    {
      "name": "onEmojiClick handler",
      "description": "The implementation uses the onEmojiClick callback prop on EmojiPicker to handle emoji selection events",
      "max_score": 20
    },
    {
      "name": "Close on selection",
      "description": "The onEmojiClick handler updates state to close the picker (sets open state to false) after an emoji is selected",
      "max_score": 15
    },
    {
      "name": "EmojiPicker import",
      "description": "The implementation correctly imports EmojiPicker from the 'emoji-picker-react' package",
      "max_score": 10
    },
    {
      "name": "Emoji data usage",
      "description": "The implementation correctly accesses the selected emoji from the EmojiClickData parameter (e.g., using emojiObject.emoji or emojiObject.unified) provided by onEmojiClick",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

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

tile.json