Itinerary-generator NPM

Itinerary Generator

A React component library for generating travel itineraries based on user inputs. Perfect for travel applications, booking websites, and trip planning tools.

Installation

Install the package using npm:

npm install itinerary-generator

Or using yarn:

yarn add itinerary-generator

Features

🌍 Generate complete travel itineraries for any destination
📅 Support for customizable date ranges
👥 Accommodates adults, children, and infants
🔑 API key integration for secure access
📱 Responsive design that works on all devices
📝 Detailed daily plans with a single main activity, meal suggestions, and estimated costs
🎯 Customizable preferences for activities and budget type

Quick Start

Basic Usage

import React from 'react';
import ItineraryForm from 'itinerary-generator';

function App() {
  const handleItineraryData = (data) => {
    console.log('Received itinerary data:', data);
    // Process or display the itinerary data
  };

  return (
    <div className="App">
      <h1>Plan Your Trip</h1>
      <ItineraryForm
        apiKey="your-api-key-here"
        onDataReceived={handleItineraryData}
        formDetails={{
          departureCity: 'New York',
          arrivalCity: 'Paris',
          departureDate: '2025-06-10',
          arrivalDate: '2025-06-20',
          travelers: {
            adults: 2,
            children: 1,
            infants: 0,
          },
          preferences: {
            activities: ['City sightseeing', 'Historical sites', 'Shopping'],
            budgetType: 'Mid-range',
          },
        }}
      />
    </div>
  );
}

export default App;

API Reference

`<ItineraryForm>` Props

Prop	Type	Required	Description
apiKey	string	Yes	Your API key for authentication
onDataReceived	function	Yes	Callback function that receives itinerary data
formDetails	object	Yes	Details about the trip (see below)
key	string	No	React key for the component (optional)

`formDetails` Object

Property	Type	Required	Description
departureCity	string	Yes	The departure city
arrivalCity	string	Yes	The arrival city (destination)
departureDate	string	Yes	Trip start date in 'YYYY-MM-DD' format
arrivalDate	string	Yes	Trip end date in 'YYYY-MM-DD' format
travelers	object	Yes	Number of travelers
preferences	object	Yes	Travel preferences (activities, budget)

`travelers` Object

Property	Type	Required	Description
adults	number	Yes	Number of adults
children	number	Yes	Number of children
infants	number	Yes	Number of infants

`preferences` Object

Property	Type	Required	Description
activities	string[]	Yes	Preferred activities (e.g., sightseeing, shopping)
budgetType	string	Yes	Budget type: 'Budget', 'Mid-range', or 'Luxury'

Returned Itinerary Data Structure

The onDataReceived callback receives an object with the following structure:

interface ItineraryResult {
  departure_city: string;
  arrival_city: string;
  departure_date: string;
  arrival_date: string;
  travelers: {
    adults: number;
    children: number;
    infants: number;
  };
  budget_type: 'Budget' | 'Mid-range' | 'Luxury';
  itinerary: ItineraryDay[];
}

interface ItineraryDay {
  day: number;
  date: string;
  activity: string;
  location: string;
  meal_suggestions: string[];
  estimated_cost: number;
  additional_notes: string;
}

Examples

With Travel Preferences

<ItineraryForm
  apiKey="your-api-key-here"
  onDataReceived={handleItineraryData}
  formDetails={{
    departureCity: 'New York',
    arrivalCity: 'Paris',
    departureDate: '2025-06-10',
    arrivalDate: '2025-06-20',
    travelers: {
      adults: 2,
      children: 1,
      infants: 0,
    },
    preferences: {
      activities: ['City sightseeing', 'Historical sites', 'Shopping'],
      budgetType: 'Mid-range',
    },
  }}
/>

Handling the Returned Data

import React, { useState } from 'react';
import ItineraryForm from 'itinerary-generator';

function TripPlanner() {
  const [itinerary, setItinerary] = useState(null);

  const handleItineraryData = (data) => {
    setItinerary(data);
  };

  return (
    <div>
      <h1>Trip Planner</h1>
      <ItineraryForm
        apiKey="your-api-key-here"
        onDataReceived={handleItineraryData}
        formDetails={{
          departureCity: 'New York',
          arrivalCity: 'Paris',
          departureDate: '2025-06-10',
          arrivalDate: '2025-06-20',
          travelers: {
            adults: 2,
            children: 1,
            infants: 0,
          },
          preferences: {
            activities: ['City sightseeing', 'Historical sites', 'Shopping'],
            budgetType: 'Mid-range',
          },
        }}
      />
      {itinerary && itinerary.itinerary.map((day, index) => (
        <div key={index}>
          <h3>Day {day.day}: {day.date}</h3>
          <p><strong>Activity:</strong> {day.activity}</p>
          <p><strong>Location:</strong> {day.location}</p>
          <p><strong>Meal Suggestions:</strong> {day.meal_suggestions.join(', ')}</p>
          <p><strong>Estimated Cost:</strong> ${day.estimated_cost} per person</p>
        </div>
      ))}
    </div>
  );
}

export default TripPlanner;