Components and hooks¶

H5P equivalents

LessonKit	H5P
`Quiz` / `KnowledgeCheck`	Multiple Choice
`TrueFalse`	True/False
`FillInTheBlanks`	Fill in the Blanks
`DragAndDrop`	Drag and Drop
`DragTheWords`	Drag the Words
`MarkTheWords`	Mark the Words
`AssessmentSequence`	Question Set
`Scenario`	Scenario / narrative block
`Reflection`	Open response (manual scoring)

More types (InteractiveVideo, SlideDeck, …) are on the roadmap. See Coming from H5P? and the capability map.

Canonical block list, props, and contracts: Block catalog reference.

Components¶

Component	Required props	Role
`Course`	`title`, `courseId`	Wraps provider; course shell
`Lesson`	`title`, `lessonId`	Lesson lifecycle (start/complete on mount/unmount)
`Scenario`	—	Semantic scenario region
`Quiz` / `KnowledgeCheck`	`checkId`, `question`, `choices`, `answer`	MCQ assessment (`quiz_*` telemetry)
`TrueFalse`	`checkId`, `question`, `answer` (boolean)	Two-option assessment (`assessment_*` telemetry)
`FillInTheBlanks`	`checkId`, `question`, `blanks[]`	Inline inputs; `interactionType: fillInBlanks`
`DragTheWords`	`checkId`, `question`, `zones[]`, `pool[]`	Inline drag targets
`DragAndDrop`	`checkId`, `question`, `items[]`, `targets[]`	Drag items to targets; keyboard alternative
`MarkTheWords`	`checkId`, `question`, `tokens[]`	Select correct word tokens
`AssessmentSequence`	`checkId`, children with `checkId`	Question-set container; aggregates child handles
`Reflection`	optional `prompt`, `blockId`	Textarea reflection block
`ProgressTracker`	—	Shows completed lesson count

Course accepts config for tracking/xAPI and optional sinks (same shape as LessonkitProvider).

Storybook¶

Browse published stories: Storybook on GitHub Pages.

Run the gallery locally from the monorepo:

npm run storybook

See packages/react/stories for story groups (Course/Lesson layouts, Quiz states, blocks). API index: API reference.

Hooks¶

Hook	Returns
`useLessonkit()`	Full runtime (throws outside provider)
`useProgress()`	`progress` state
`useTracking()`	`{ track }`
`useQuizState()`	`{ answer, complete }` — MCQ helper; requires `checkId`
`useAssessmentState()`	Generalized assessment lifecycle + `assessment_*` telemetry
`useCompletion()`	`{ completeLesson, completeCourse }`
`useTheme()`	Theme context from `ThemeProvider`

Lesson lifecycle¶

Lesson calls setActiveLesson on mount and completeLesson on unmount. SPA navigation that unmounts lessons emits completion and time-on-task events—design navigation accordingly (see examples/react-vite).

Custom interactions¶

const { track } = useTracking();

track("interaction", { kind: "branch_choice", branch: "verify" });

Use discriminated data shapes per Telemetry reference.

Provider-only usage¶

<LessonkitProvider config={{ courseId: "my-course", tracking: { sink } }}>
  {/* custom tree */}
</LessonkitProvider>

Package README: @lessonkit/react on GitHub.