React component library for interactive language learning activities
npm install edugo-activities-testA comprehensive React component library designed for creating engaging, interactive translation and language learning experiences.
- Fill-in-the-gap exercises
- Key sentence practice with vocabulary
- Interactive translations
- JSON-driven activity rendering
- Smooth animations with Framer Motion
- Fully typed with TypeScript
- Beautiful UI components with shadcn/ui
``bash`
npm install edugo-activities-test
This package has the following peer dependencies:
- react ^18.0.0
- react-dom ^18.0.0
- framer-motion ^10.0.0
- tailwindcss ^3.0.0
`tsx
import { ActivityList, type ActivityResponse } from 'edugo-activities-test';
const sampleData: ActivityResponse = {
id: "lesson-1",
activities: [
{
activity_name: "Fill in the gap",
activity_type: "FILL_IN_THE_GAP_SENTENCE",
id: "fill-gap-1",
gap: {
text: "watch movies",
translation: "veo pelĂculas"
},
subject: {
text: "I usually
translation: "Normalmente
}
}
]
};
function App() {
const handleComplete = (activityId: string, correct: boolean) => {
console.log(Activity ${activityId} completed. Correct: ${correct});
};
return (
onComplete={handleComplete}
className="container"
/>
);
}
`
Props:
- data: ActivityResponse - The activity data to renderonComplete: (activityId: string, correct: boolean) => void
- - Callback when an activity is completedclassName?: string
- - Optional CSS class name
`typescript
type ActivityType = "FILL_IN_THE_GAP_SENTENCE" | "KEY_SENTENCE_PRACTICE";
interface Activity {
activity_name: string;
activity_type: ActivityType;
id: string;
gap?: {
text: string;
translation: string;
};
subject?: {
text: string;
translation: string;
};
key_sentence?: {
text: string;
translation: string;
};
key_words?: Array<{
text: string;
translation: string;
}>;
}
interface ActivityResponse {
id: string;
activities: Activity[];
}
``