Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Add a shared useControllableState hook

Aperta
#876 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
68/100
Tipo di issue
Refactoring
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia in packages/raystack/hooks e confronta i pattern controlled/uncontrolled in sidebar-root.tsx, select-root.tsx e data-view.tsx. Leggi il modello referenziato di @radix-ui/react-use-controllable-state, quindi verifica che Sidebar, Select e DataView utilizzino in modo coerente la semantica condivisa.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement global

Summary

Components that support both controlled and uncontrolled usage each re-implement the controlled/uncontrolled merge by hand, with a slightly different shape every time. There's no shared hook for it in packages/raystack/hooks.

Current duplication

  • sidebar-root.tsx:128-129 — const [internalOpen, setInternalOpen] = useState(defaultOpen); const open = providedOpen ?? internalOpen;
  • select-root.tsx:113-122 — same ?? pattern, duplicated again for searchValue a few lines later.
  • data-view.tsx:73-83 — different style again: explicit isViewControlled = view !== undefined boolean instead of ??.

Components built directly on Base UI primitives (Checkbox, Switch, Tabs, Accordion, Dialog) don't have this problem — they get controlled/uncontrolled handling for free from Base UI. This only affects components with custom root logic.

Suggested approach

Add one useControllableState({ value, defaultValue, onChange }) hook to packages/raystack/hooks, modeled on @radix-ui/react-use-controllable-state. Migrate Sidebar, Select, and DataView onto it so all three follow the same merge semantics.

Notes

Found via a components.build practices audit (state management dimension).

Lingua principale
TypeScript
Stelle
70
Fork
13
Merge medio
8g 56m
PR unite (30g)
16

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di raystack/apsara

Tutte le issue di raystack/apsara

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.