Polaris React

Polaris React is a component library designed to help developers create the best experience for users. This is a customized version for iTravelHolidays.

Using the React components

We strongly recommend using the React versions of our components for rich, complex components like Tabs, Popovers, and DateTimePicker.

Installation

npm:

npm install @itravelholidays/polaris --save

yarn:

yarn add @itravelholidays/polaris

Importing styles

Import the CSS directly into your project:

import '@itravelholidays/polaris/build/esm/styles.css';

Or include it via CDN:

<link
  rel="stylesheet"
  href="https://unpkg.com/@itravelholidays/[email protected]/build/esm/styles.css"
/>

Using the components

import enTranslations from '@itravelholidays/polaris/locales/en.json';
import {AppProvider, Page, LegacyCard, Button} from '@itravelholidays/polaris';

function MyApp() {
  return (
    <AppProvider i18n={enTranslations}>
      <Page title="Example app">
        <LegacyCard sectioned>
          <Button onClick={() => alert('Button clicked!')}>Example button</Button>
        </LegacyCard>
      </Page>
    </AppProvider>
  );
}

Using DateTimePicker

This package includes a custom DateTimePicker component perfect for airline bookings:

import {DateTimePicker} from '@itravelholidays/polaris';

function FlightBooking() {
  const [departureDate, setDepartureDate] = React.useState(new Date());

  return (
    <DateTimePicker
      label="Departure Date & Time"
      value={departureDate}
      onChange={setDepartureDate}
    />
  );
}

Features

• ✅ React 19 support
• ✅ TypeScript support
• ✅ Comprehensive component library
• ✅ Custom DateTimePicker component
• ✅ Accessibility compliant
• ✅ Responsive design

Contributing

Pull requests are welcome. See the contribution guidelines for more information.

Licenses

• Source code is under a custom license based on MIT.