componente · @solu30/ui-kit/input
EmojiPicker
Panel de emojis con búsqueda y tono de piel, pensado para componer adentro de un Popover.
Seguir leyendo — 1 párrafo más
Standalone emoji picker panel. To open it from a 😊 button next to a textarea, compose it inside the kit's Popover (see ARCHITECTURE.md / ADR-099 snippet).
4 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- gestorsalon
- luigi
- raquetea
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { EmojiPicker } from '@solu30/ui-kit/input'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| onEmojiSelect | sí | (emoji: string) => void | Called with the selected emoji glyph (e.g. "😀"). |
| className | opcional | string | Extra classes for the picker root (panel). |
| locale | opcional | Locale | UI + search locale. Defaults to Spanish. |
| columns | opcional | number | Emojis per row. WhatsApp-like default is 8. |
| skinTone | opcional | SkinTone | Skin tone applied to supported emojis. |
| searchPlaceholder | opcional | string | Search input placeholder. Defaults to "Buscar emoji". |
| searchAriaLabel | opcional | string | Accessible label for the search input. Defaults to the placeholder. |
| emojiVersion | opcional | number | Cap the visible emoji set to a given Emoji version (forward-compat). |
| autoFocus | opcional | boolean | Focus the search input on mount. |
Ejemplo del paquete
<EmojiPicker onEmojiSelect={(e) => setTexto(texto + e)} columns={8}
locale="es" searchPlaceholder="Buscar emoji…" />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.