Seletor de Emojis: buscar e copiar emojis

O que é o Seletor de Emojis?

Eu construí esse seletor porque cansei de abrir o painel de emojis do sistema só para pegar as mesmas cinco carinhas e acabar rolando por dois minutos. Digitar, clicar, colar — esse é o fluxo inteiro. O conjunto de dados é o Unicode 15.1 (mais de 3.700 emojis), organizado em nove categorias, com uma busca que casa nome e palavra-chave, seis tons de pele Fitzpatrick para emojis de pessoas e uma linha de Recentes que lembra o que você copiou na sessão.

Funcionalidades principais

O conjunto de dados é o Unicode 15.1 — toda carinha, mão, comida, bandeira e símbolo adicionado até 2023, tirado direto do padrão. As categorias são as nove definidas pelo Consórcio Unicode: Carinhas e emoção, Pessoas e corpo, Animais e natureza, Comida e bebida, Viagem e lugares, Atividades, Objetos, Símbolos e Bandeiras. Uma linha de Recentes fica ao lado dos botões de categoria e registra o que você copiou na sessão, persistido em localStorage sob RECENT_EMOJIS_KEY e limitado a MAX_RECENT_EMOJIS entradas.

A busca consulta tanto o nome do emoji quanto sua lista de palavras-chave, então digitar heart retorna ❤️ e também 💛, 💚, 💙, 💘. Os tons de pele usam a escala Fitzpatrick (padrão + cinco modificadores); selecionar um aplica em todo emoji de pessoa que suporte modificadores, e emojis com hasSkinTone === false (objetos, bandeiras, comida) ignoram a seleção. Clicar num emoji escreve na área de transferência, faz uma sobreposição verde de confirmação piscar na célula por 1,5 segundo e dispara um toast — três camadas de feedback, porque escritas na área de transferência são fáceis de não notar.

A grade é responsiva: 8 colunas em telas de celular, 10 em tablets, 12 em desktop. A altura é fixa em 400px com rolagem vertical para as categorias maiores.

Como usar

Abra o Em breve: Seletor de Emojis — ele inicia em Carinhas e emoção. Clique em qualquer outro botão de categoria para trocar. Se quiser um tom, escolha um na linha de seis botões de mão acenando antes de clicar em algum emoji; o tom selecionado é aplicado na hora de copiar, então 👋 com um tom médio selecionado vira 👋🏽 na sua área de transferência. A busca ganha da rolagem para qualquer coisa que você sabe nomear: digite coffee e ☕, 🧋 aparecem na hora. Limpe o campo para voltar à navegação por categoria.

A linha de Recentes (ícone de relógio, na ponta esquerda da barra de categorias) mantém o histórico da sessão na ordem de cópia. Recentes guarda o emoji-base sem modificador de tom — sua seleção de tom atual é reaplicada na hora de copiar, então mudar de tom não bagunça o histórico.

Exemplos práticos

Compor uma mensagem do Slack sobre um lançamento:

Busca: fire    → clique 🔥
Busca: rocket  → clique 🚀

As duas cópias caem em Recentes para a próxima mensagem.

Escolher uma bandeira de país sem lembrar em qual linha ela mora:

Categoria Bandeiras → busca: brazil → clique 🇧🇷

Manter os tons de pele consistentes em uma mensagem:

Tom: escuro (5º botão) → clique 👍, 🙏, 🤝
A área de transferência recebe 👍🏿 → 🙏🏿 → 🤝🏿

Dicas e boas práticas

As seleções de tom e categoria ficam salvas no estado do componente e são restauradas a partir de um preset (recurso premium) — os presets salvos capturam tanto selectedSkinTone quanto selectedCategory.

A busca não é ranqueada. Os resultados saem na ordem natural do conjunto de dados, então termos amplos como heart ou face retornam muitos; termos estreitos como anguished, um ou dois. Se a busca vier vazia, tente um sinônimo: sob no lugar de cry, grin no lugar de big smile, poop se brown não trouxer o que você esperava. Os nomes do conjunto são nomes Unicode formais e nem sempre batem com a fala do dia a dia.

Modificadores de tom só se aplicam a emojis com hasSkinTone === true. Bandeiras, comida, objetos e símbolos continuam amarelos qualquer que seja o tom selecionado.

Problemas comuns e solução

Recentes está vazio depois de várias cópias. A lista lê do localStorage. Janelas privadas/anônimas e navegadores com localStorage desativado não vão persistir — cópias dentro da sessão ainda aparecem na memória, mas reiniciam ao recarregar.

O emoji colado aparece como caixa ou ponto de interrogação. O app ou plataforma que recebe não suporta esse codepoint do Unicode 15.1. Emojis adicionados em 2022–2023 podem não renderizar em versões antigas de Android, sistemas operacionais antigos ou apps que não atualizaram a fonte de emojis. Os emojis mais antigos, de 2015–2019, funcionam em todo lugar.

O toast diz "copiado" mas a área de transferência tem o tom errado. Há um modificador de tom de pele selecionado. Clique no botão de tom mais à esquerda (padrão) para tirar o modificador e copie de novo.

Privacidade e segurança

Busca, filtragem por categoria, aplicação de tom de pele e escrita na área de transferência rodam todas localmente. O conjunto completo de emojis vem junto com o JavaScript da página. Nenhuma consulta, nenhum caractere copiado e nenhum dado de uso são enviados para lugar nenhum. Os emojis recentes vivem no localStorage e ficam no seu dispositivo. Após o primeiro carregamento, o seletor funciona offline.

Perguntas frequentes

Como funciona a seleção de tom de pele?

Os tons de pele no Unicode usam codepoints modificadores da escala Fitzpatrick (U+1F3FB a U+1F3FF), anexados depois do codepoint do emoji-base. O seletor chama applySkintone(emoji.emoji, selectedSkinTone), que concatena o modificador quando a flag hasSkinTone do emoji é true. Emojis sem suporte a tons são copiados sem modificação.

Quantos emojis posso guardar em Recentes?

A lista de Recentes é limitada a MAX_RECENT_EMOJIS entradas. Cópias novas vão para a frente; a mais antiga sai no limite. Copiar de novo um emoji o move para a frente em vez de duplicar.

Posso buscar em outros idiomas além do inglês?

Não. A busca consulta nomes e palavras-chave do conjunto de dados, que são os nomes formais em inglês do padrão Unicode. Use palavras-chave em inglês.

Por que clicar num emoji mostra uma sobreposição verde?

É a confirmação visual de que a cópia deu certo. A sobreposição segura por 1,5 segundo (setTimeout(() => setCopiedEmoji(null), 1500)) e some. O toast lateral confirma o caractere específico que foi copiado.

Experimente o Seletor de Emojis agora: Em breve: Seletor de Emojis

Ferramentas relacionadas

• Em breve: Tabela ASCII — Consultar códigos de caracteres não-emoji da faixa ASCII.
• Em breve: Seletor Aleatório — Seleção aleatória a partir de uma lista própria.