Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Component: Locale Picker

Offen
  • Stimmt etwas nicht?
#33 2 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@ujwalbajaj arbeitet bereits daran.

Seit 15.10.2026.

  • #49 von @ujwalbajaj — offen

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
30/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, tailwindcss, typescript
Bereich
frontend, internationalization, localization

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
39
Forks
16
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
10

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus babelize/babelize-elements

Alle Issues in babelize/babelize-elements

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.