Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

i18n: hardcoded English UI strings can't be translated

Aberta
  • Algo errado?
#30 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
40/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
react, tailwindcss, typescript
Domínio
documentation, frontend, localization

Direção de pesquisa

Start with the LanguageSwitcher, PhoneInput and NavBar components, finding the hardcoded strings listed in the issue table. Decide how the proposed optional labels prop and its typed keys should look, and how Intl.DisplayNames fits PhoneInput country names; the issue leaves both open. Done means exported *Labels types with TSDoc, a docs section with a translated example, and tests showing custom labels render.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

enhancement good first issue priority: medium

i18n: hardcoded English UI strings can't be translated

For a localization library, the components ship non-translatable English text:

Component Strings
LanguageSwitcher Search..., Search languages, No results, Select language, Current language: …
PhoneInput Select country, Search countries..., Search countries, country names (English only)
NavBar Select language, Current language: …, Toggle menu, GitHub
Proposal

Add an optional labels prop per component with typed keys and English defaults, e.g.:

<LanguageSwitcher
  locales={locales}
  labels={{
    search: "Rechercher…",
    noResults: "Aucun résultat",
    listbox: "Choisir la langue",
    current: (name) => `Langue actuelle : ${name}`,
  }}
/>

For PhoneInput country names, consider Intl.DisplayNames with a displayLocale prop.

Acceptance
  • Exported *Labels types, TSDoc on each key
  • Docs page section showing a translated example
  • Tests asserting custom labels render
Linguagem predominante
TypeScript
Estrelas
39
Forks
16
Merge médio
2d 12h
PRs com merge (30d)
10

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de babelize/babelize-elements

Todas as issues de babelize/babelize-elements

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.