Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Component: Locale Picker

Fermée
  • Quelque chose ne va pas ?
#33 2 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@ujwalbajaj y travaille déjà.

Depuis le 15/10/2026.

  • #49 par @ujwalbajaj — fusionnée

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
30/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
react, tailwindcss, typescript
Domaine
frontend, internationalization, localization

Piste de recherche

Read ARCHITECTURE.md and CONTRIBUTING.md first, then look at an existing picker in src/registry/components/ to copy its prop, ref and controlled-state conventions. Wire the new component through src/registry/components/index.ts and src/registry/registry.ts, and add tests under test/. Done means the component exports a typed props interface, its docs page is in content/docs/components/, its live demo is in src/components/docs/, and the tests pass.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

component good first issue locale-picker

Component: Locale Picker

Build a picker that lets users choose their region-level preferences — not just language — e.g. for a settings page.

Requirements
  • TypeScript-first with exported props interface
  • Follows the conventions in ARCHITECTURE.md (controlled/uncontrolled via useControllableState, forwarded ref, ...rest passthrough, shared Locale type)
  • Lets the user choose a region and shows derived defaults: currency, date format preview, number format preview, first day of week
  • Uses Intl.DisplayNames, Intl.NumberFormat, Intl.DateTimeFormat (and Intl.Locale#getWeekInfo() where available)
  • Searchable list, keyboard accessible
  • RTL-aware, dark mode via dark: variants
  • Tailwind CSS compatible
Expected API
<LocalePicker
  defaultValue="en-IN"
  regions={["IN", "US", "GB", "DE", "JP"]}
  onValueChange={(locale) => console.log(locale)}
/>
Deliverables
  • Component source in src/registry/components/
  • Export in src/registry/components/index.ts and entry in src/registry/registry.ts
  • Tests in test/
  • Documentation page in content/docs/components/ and live demo in src/components/docs/

See CONTRIBUTING.md.

Langage dominant
TypeScript
Étoiles
39
Forks
16
Merge moyen
10 h 35 min
PR mergées (30 j)
32

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de babelize/babelize-elements

Toutes les issues de babelize/babelize-elements

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.