react-flight-search-widget

A beautiful, fully customizable travel search widget for React applications. Includes Flight Search, Hotel Search, and a combined Travel Search Widget with product tabs.

Features

• Flight Search Widget - Origin/destination, dates, passengers, cabin class
• Hotel Search Widget - Destination, check-in/out, rooms & guests
• Combined Travel Widget - Tabbed interface for flights and hotels
• Modern UI - Clean, professional design with smooth animations
• Fully Customizable - Theme colors, border radius, and more
• TypeScript Support - Full type definitions included
• Responsive Design - Works on all screen sizes
• Zero Dependencies - Only React as a peer dependency

Installation

npm install react-flight-search-widget

or

yarn add react-flight-search-widget

Quick Start

Import Styles

import 'react-flight-search-widget/dist/styles.css';

Option 1: Combined Travel Widget (Recommended)

import { TravelSearchWidget } from 'react-flight-search-widget';
import 'react-flight-search-widget/dist/styles.css';

function App() {
  const handleFlightSearch = (data) => {
    console.log('Flight search:', data);
  };

  const handleHotelSearch = (data) => {
    console.log('Hotel search:', data);
  };

  return (
    <TravelSearchWidget
      onFlightSearch={handleFlightSearch}
      onHotelSearch={handleHotelSearch}
      showFlights={true}
      showHotels={true}
    />
  );
}

Option 2: Flight Search Widget Only

import { FlightSearchWidget } from 'react-flight-search-widget';
import 'react-flight-search-widget/dist/styles.css';

function App() {
  const handleSearch = (data) => {
    console.log('Flight search:', data);
    // {
    //   tripType: 'roundtrip',
    //   origin: { code: 'JFK', city: 'New York', ... },
    //   destination: { code: 'LAX', city: 'Los Angeles', ... },
    //   departureDate: '2024-03-15',
    //   returnDate: '2024-03-22',
    //   passengers: { adults: 2, children: 1, infants: 0 },
    //   cabinClass: 'economy'
    // }
  };

  return <FlightSearchWidget onSearch={handleSearch} />;
}

Option 3: Hotel Search Widget Only

import { HotelSearchWidget } from 'react-flight-search-widget';
import 'react-flight-search-widget/dist/styles.css';

function App() {
  const handleSearch = (data) => {
    console.log('Hotel search:', data);
    // {
    //   destination: { id: '1', name: 'New York', country: 'USA' },
    //   checkInDate: '2024-03-15',
    //   checkOutDate: '2024-03-18',
    //   rooms: 1,
    //   guests: { adults: 2, children: 0 }
    // }
  };

  return <HotelSearchWidget onSearch={handleSearch} />;
}

Components

TravelSearchWidget

Combined widget with tabs for flights and hotels.

| Prop | Type | Default | Description | |------|------|---------|-------------| | onFlightSearch | function | - | Callback for flight search | | onHotelSearch | function | - | Callback for hotel search | | defaultProduct | 'flight' \| 'hotel' | 'flight' | Default active tab | | showFlights | boolean | true | Show flights tab | | showHotels | boolean | true | Show hotels tab | | airports | Airport[] | Built-in | Custom airports list | | cities | City[] | Built-in | Custom cities list | | theme | ThemeOptions | See below | Custom theme | | flightLoading | boolean | false | Flight search loading state | | hotelLoading | boolean | false | Hotel search loading state |

FlightSearchWidget

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSearch | function | Required | Callback with search data | | airports | Airport[] | Built-in | Custom airports list | | defaultTripType | TripType | 'roundtrip' | Default trip type | | defaultCabinClass | CabinClass | 'economy' | Default cabin class | | theme | ThemeOptions | See below | Custom theme | | isLoading | boolean | false | Loading state | | searchButtonText | string | 'Search Flights' | Button text |

HotelSearchWidget

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSearch | function | Required | Callback with search data | | cities | City[] | Built-in | Custom cities list | | theme | ThemeOptions | See below | Custom theme | | isLoading | boolean | false | Loading state | | searchButtonText | string | 'Search Hotels' | Button text |

Theming

Customize the widget appearance:

<TravelSearchWidget
  onFlightSearch={handleFlightSearch}
  onHotelSearch={handleHotelSearch}
  theme={{
    primaryColor: '#8b5cf6',      // Purple
    secondaryColor: '#a78bfa',
    backgroundColor: '#ffffff',
    textColor: '#1f2937',
    borderRadius: '16px',
  }}
/>

Theme Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | primaryColor | string | #2563eb | Primary brand color | | secondaryColor | string | #3b82f6 | Secondary/hover color | | backgroundColor | string | #ffffff | Widget background | | textColor | string | #1f2937 | Text color | | borderRadius | string | 12px | Border radius |

TypeScript Support

Full type definitions are included:

import { 
  TravelSearchWidget,
  FlightSearchWidget,
  HotelSearchWidget,
  // Types
  FlightSearchData,
  HotelSearchData,
  Airport,
  City,
  TripType,
  CabinClass,
  ProductType,
  ThemeOptions,
} from 'react-flight-search-widget';

Custom Data

Custom Airports

const myAirports = [
  { code: 'JFK', name: 'John F. Kennedy International', city: 'New York', country: 'USA' },
  { code: 'LAX', name: 'Los Angeles International', city: 'Los Angeles', country: 'USA' },
];

<FlightSearchWidget onSearch={handleSearch} airports={myAirports} />

Custom Cities

const myCities = [
  { id: '1', name: 'New York', country: 'USA', popular: true },
  { id: '2', name: 'Paris', country: 'France', popular: true },
];

<HotelSearchWidget onSearch={handleSearch} cities={myCities} />

Examples

Flights Only

<TravelSearchWidget
  onFlightSearch={handleFlightSearch}
  showFlights={true}
  showHotels={false}
/>

Hotels Only

<TravelSearchWidget
  onHotelSearch={handleHotelSearch}
  showFlights={false}
  showHotels={true}
/>

Default to Hotels Tab

<TravelSearchWidget
  onFlightSearch={handleFlightSearch}
  onHotelSearch={handleHotelSearch}
  defaultProduct="hotel"
/>

With Loading States

const [flightLoading, setFlightLoading] = useState(false);
const [hotelLoading, setHotelLoading] = useState(false);

const handleFlightSearch = async (data) => {
  setFlightLoading(true);
  await searchFlightsAPI(data);
  setFlightLoading(false);
};

<TravelSearchWidget
  onFlightSearch={handleFlightSearch}
  onHotelSearch={handleHotelSearch}
  flightLoading={flightLoading}
  hotelLoading={hotelLoading}
/>

Development

# Install dependencies
npm install

# Run demo app
npm run dev

# Build package
npm run build

License

MIT © Your Name