Components

All components are optional wrappers around LoopKit hooks. Import styles first:

import '@loopkit/react/styles.css';

ReviewSession

Full study session UI with card display, grade buttons, and completion summary.

import { ReviewSession } from '@loopkit/react';

<ReviewSession
    deckId="deck-123"
    onComplete={(summary) => console.log(summary)}
/>

Prop	Type	Description
`deckId`	`string`	The deck to study
`className`	`string?`	Additional CSS class names
`onComplete`	`(summary: SessionSummary) => void`	Called when session finishes

CardViewer

Displays a card's front and/or back content.

import { CardViewer } from '@loopkit/react';

<CardViewer
    renderedContent={{ front: '<p>Question</p>', back: '<p>Answer</p>' }}
    showBack={false}
/>

Prop	Type	Description
`renderedContent`	`RenderedCard`	The `{ front, back }` HTML strings
`showBack`	`boolean`	Whether to show the back side
`className`	`string?`	Additional CSS class names

GradeButtons

Grade selection buttons with interval previews.

import { GradeButtons } from '@loopkit/react';

<GradeButtons
    onGrade={(grade) => handleGrade(grade)}
    nextIntervals={{ again: '1m', hard: '6m', good: '10m', easy: '4d' }}
/>

Prop	Type	Description
`onGrade`	`(grade: Grade) => void`	Called when a grade button is clicked
`nextIntervals`	`Record<Grade, string>`	Interval labels for each button
`disabled`	`boolean?`	Disable all grade buttons
`className`	`string?`	Additional CSS class names

SessionComplete

Displays session summary after study is complete.

import { SessionComplete } from '@loopkit/react';

<SessionComplete
    summary={sessionSummary}
    onClose={() => navigate('/decks')}
/>

Prop	Type	Description
`summary`	`SessionSummary`	Session results
`onClose`	`() => void`	Called when user dismisses
`className`	`string?`	Additional CSS class names

DeckList

Flat list of all decks.

import { DeckList } from '@loopkit/react';

<DeckList onDeckSelect={(deckId) => navigate(`/study/${deckId}`)} />

Prop	Type	Description
`onDeckSelect`	`(id: string) => void`	Called when a deck is selected
`className`	`string?`	Additional CSS class names

DeckOverview

Overview of a single deck with card counts and a study button.

import { DeckOverview } from '@loopkit/react';

<DeckOverview deckId="deck-123" onStudy={() => startStudy()} />

Prop	Type	Description
`deckId`	`string`	The deck to display
`onStudy`	`() => void`	Called when study button is clicked
`className`	`string?`	Additional CSS class names

DeckTree

Hierarchical deck browser with collapsible nodes.

import { DeckTree } from '@loopkit/react';

<DeckTree onDeckSelect={(deckId) => navigate(`/decks/${deckId}`)} />

Prop	Type	Description
`onDeckSelect`	`(id: string) => void`	Called when a deck is selected
`className`	`string?`	Additional CSS class names

CardEditor

Form for creating and editing notes.

import { CardEditor } from '@loopkit/react';

<CardEditor
    noteTypeId="basic-type-id"
    onSave={(note) => console.log('Saved:', note.id)}
/>

Prop	Type	Description
`noteTypeId`	`string`	Note type for field schema
`initialNote`	`NoteBase?`	Pre-fill for editing
`onSave`	`(note: NoteBase) => void`	Called after successful save
`className`	`string?`	Additional CSS class names

StudyStats

Statistics charts for a deck.

import { StudyStats } from '@loopkit/react';

<StudyStats deckId="deck-123" />

Prop	Type	Description
`deckId`	`string`	The deck to show stats for
`className`	`string?`	Additional CSS class names

Components

On this page