LoopKitFrontend
Frontend Overview
Overview of the @loopkit/react package
The @loopkit/react package provides React hooks and pre-styled components for building flashcard study interfaces.
Philosophy
LoopKit follows a headless-first approach:
- Hooks expose all state and actions — use them for fully custom UIs
- Components are optional pre-styled wrappers around hooks — use them for rapid prototyping
Every component can be replaced by your own implementation using the underlying hook.
What's Included
Hooks
| Hook | Purpose |
|---|---|
useReviewSession | Complete study session state machine |
useDeck | Single deck with card counts |
useDecks | List all decks |
useDeckTree | Hierarchical deck tree |
useCard | Single card with rendered content |
useCardEditor | Create and update notes |
useNoteTypes | List available note types |
useStats | Deck statistics |
useImport | CSV and JSON import |
useExport | CSV and JSON export |
useTags | List all tags |
Components
| Component | Description |
|---|---|
<ReviewSession> | Full study session UI |
<CardViewer> | Card front/back with flip |
<GradeButtons> | Grade selection buttons |
<SessionComplete> | Session summary display |
<DeckList> | Flat deck list |
<DeckOverview> | Single deck overview |
<DeckTree> | Hierarchical deck browser |
<CardEditor> | Note creation/editing form |
<StudyStats> | Statistics charts |
Peer Dependencies
{
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
}