@konami33/roadmap-visualization

Interactive roadmap visualization component for React applications. Display course curricula, learning paths, and training programs with beautiful interactive visualizations.

Installation

``bash
npm install @konami33/roadmap-visualization
`

Quick Start

`tsx
import { RoadmapVisualization } from '@konami33/roadmap-visualization';
import '@konami33/roadmap-visualization/styles';
import courseData from './data/my-course.json';

function App() {
return (


export default App;
`

Features

- Interactive Visualization: Pan, zoom, and explore course structure
- Hierarchical Display: Milestones → Modules → Classes → Labs
- Beautiful UI: Modern gradient-based design with smooth animations
- Responsive: Works on desktop and mobile devices
- Performant: Optimized for large course structures
- Flexible: Accepts JSON data for easy integration
- Self-Contained: All functionality built-in

Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| courseData | CourseData | Yes | Course structure data |
| className | string | No | Additional CSS class |
| onModuleClick | (moduleId: number) => void | No | Module click callback |
| onMilestoneClick | (milestoneId: number) => void | No | Milestone click callback |

Styling

Import the styles in your application:

`tsx
import '@konami33/roadmap-visualization/styles';
``

License

MIT © konami33