Language Learning Activities React Package

A comprehensive React component library designed for creating engaging, interactive translation and language learning experiences.

Features

- 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

Installation

``bash
npm install edugo-activities-test
`

Requirements

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

Usage

`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 or read books.",
translation: "Normalmente o leo libros."
}
}
]
};

function App() {
const handleComplete = (activityId: string, correct: boolean) => {
console.log(Activity ${activityId} completed. Correct: ${correct});
};

return (
data={sampleData}
onComplete={handleComplete}
className="container"
/>
);
}
`

Components

$3

The main component that renders a list of language learning activities.

Props:
- data: ActivityResponse - The activity data to render
- onComplete: (activityId: string, correct: boolean) => void - Callback when an activity is completed
- className?: string - Optional CSS class name

$3

A component for gap-filling exercises.

$3

A component for practicing key vocabulary in context.

Types

`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[];
}
``

License

MIT