CUSS2 React

React hooks for the CUSS2 TypeScript SDK

Build powerful airline self-service kiosks with intuitive React hooks. Fully typed, reactive, and production-ready components for barcode scanners, card readers, document readers, printers, and more.

Get Started API Docs Examples
Quick Example 
import { useBarcodeReader } from '@elevationai/cuss2-react';

function CheckInComponent() {
  const { data, ready } = useBarcodeReader();

  useEffect(() => {
    if (data) {
        console.log('Boarding pass scanned:', data);
    }
  }, [data]);

  return (
    <div>
      {ready ? 'Scanner ready' : 'Scanner unavailable'}
    </div>
  );
}

Quick Start

1

Install

Add CUSS2 React to your project

bash 
npm install @elevationai/cuss2-react
2

Setup Provider

Wrap your app with Cuss2Connector

typescript 
import React from 'react';
import ReactDOM from 'react-dom/client';
import KioskComponent from './KioskComponent';
import { Cuss2Connector, Cuss2ConnectionOptions } from '@elevationai/cuss2-react';

const options: Cuss2ConnectionOptions = {
  cussUrl: 'https://cloudsandbox.azurewebsites.net',
  clientId: 'your-client-id',
  clientSecret: 'your-client-secret'
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Cuss2Connector options={options}>
      <KioskComponent />
    </Cuss2Connector>
  </React.StrictMode>
);
3

Use Hooks

Access CUSS2 devices with React hooks

typescript 
import {
  useCuss2,
  useBarcodeReader,
  useCardReader,
  useAnnouncement
} from '@elevationai/cuss2-react';

function KioskComponent() {
  const { connected, state } = useCuss2();
  const { device, data, ready } = useBarcodeReader();

  if (!connected) {
    return <div>Connecting to CUSS2...</div>;
  }

  return <div>Kiosk Ready</div>;
}

Why CUSS2 React?

Native React

Built specifically for React with custom hooks, Context API, and full TypeScript support.

Real-time Updates

React state automatically updates with device events. No manual subscription management needed.

Modular Hooks

Individual hooks for each CUSS2 component. Import only what you need for optimal bundle size.

Type Safe

Full TypeScript support with proper typing for all CUSS2 data structures and platform responses.

Accessibility Ready

Built-in support for accessibility features including headset audio, keypad navigation, and announcements.

Production Ready

Battle-tested in real airline environments with error handling, auto-cleanup, and comprehensive documentation.

Available Hooks

Reader Hooks

useBarcodeReader

Barcode and QR code scanning with real-time data

useCardReader

Magnetic stripe card reading with payment support

useDocumentReader

Passport and ID document scanning with MRZ parsing

Printer Hooks

useBoardingPassPrinter

Boarding pass printing with ITPS format

useBagTagPrinter

Baggage tag printing with asset management

Input & Control

useKeypad

Navigation keypad for accessibility

useScale

Luggage weighing with real-time monitoring

useHeadset

Audio headset for accessibility support

useAnnouncement

Text-to-speech and audio playback

Ready to Build Your Kiosk?

Explore our comprehensive documentation and examples to get started with CUSS2 React

View API Documentation See Examples & Guides