React
UI components in the @edu-sdk/react package.
@edu-sdk/react renders data produced by edu-sdk.
Components
| Component | Data from | Prop shape |
|---|---|---|
<Flashcards /> | createFlashcards() | flashcards: Flashcard[] (use artifact.content) |
<Quiz /> | createQuiz() | questions: QuizQuestion[] (use artifact.content) |
<StudyGuide /> | createStudyGuide() | Full Artifact<StudyGuideContent> |
<PracticeProblems /> | createPracticeProblems() | problems: PracticeProblem[] (use artifact.content) |
<Quiz questions={quiz.content} />
<StudyGuide studyGuide={studyGuide} />No component for
| Core API | How to render |
|---|---|
createNote() | Render Markdown yourself (artifact.content is a string) |
createLearningSet() | Compose the material components from nested artifacts |
createStudySession() | Build a runner over blocks + materials — see Study session flow |
<Quiz /> grades with gradeQuiz() internally. It does not use createQuizAttempt / completeQuizAttempt — those are for app-owned persistence.
Styling
Three levels. See Styling:
- Import
@edu-sdk/react/styles.cssfor the defaults. - Pass
className/classNamesto override parts of a component. - Set CSS variables (for example
--edu-quiz-background) to theme the defaults.
See Quick Start for <Quiz />, and Concepts for prop-shape rules.