Core Setup and Application Structure

/**
 * Initialize Ionic React with global configuration options.
 * Call this once at the start of your application before rendering any Ionic components.
 * @param config - Optional global configuration for Ionic React
 */
function setupIonicReact(config?: IonicConfig): void;

interface IonicConfig {
  /** Enable/disable ripple effect on interactive elements */
  rippleEffect?: boolean;
  /** Set the global mode for all components */
  mode?: 'ios' | 'android' | 'md';
  /** Enable/disable swipe-to-go-back gesture */
  swipeBackEnabled?: boolean;
  /** Enable/disable animations globally */
  animated?: boolean;
  // Note: IonicConfig is imported from @ionic/core and contains
  // many additional configuration options for platform-specific
  // behavior, theming, and component customization
  [key: string]: any;
}

import { setupIonicReact } from '@ionic/react';

setupIonicReact({
  rippleEffect: true,
  mode: 'ios',
  animated: true
});

/**
 * Root application component that provides overlay management and Ionic context.
 * Must wrap all other Ionic components in your app.
 */
const IonApp: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

import React from 'react';
import { IonApp } from '@ionic/react';

const App: React.FC = () => (
  <IonApp>
    {/* All your app content goes here */}
  </IonApp>
);

/**
 * Page container component that provides proper page styling and lifecycle management.
 * Works with or without the router and handles mobile-specific page transitions.
 */
const IonPage: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

import React from 'react';
import { IonPage, IonContent } from '@ionic/react';

const HomePage: React.FC = () => (
  <IonPage>
    <IonContent>
      <h1>Welcome to my app!</h1>
    </IonContent>
  </IonPage>
);

/**
 * Scrollable content area component that handles safe areas and provides scroll functionality.
 * Typically used as a child of IonPage.
 */
const IonContent: React.FC<{
  className?: string;
  children?: React.ReactNode;
  scrollEvents?: boolean;
  onIonScroll?: (event: CustomEvent) => void;
  onIonScrollStart?: (event: CustomEvent) => void;
  onIonScrollEnd?: (event: CustomEvent) => void;
}>;

/** Page header section */
const IonHeader: React.FC<{
  className?: string;
  children?: React.ReactNode;
  translucent?: boolean;
}>;

/** Page footer section */
const IonFooter: React.FC<{
  className?: string;
  children?: React.ReactNode;
  translucent?: boolean;
}>;

/** Header/footer toolbar container */
const IonToolbar: React.FC<{
  className?: string;
  children?: React.ReactNode;
  color?: string;
}>;

/** Page/toolbar title */
const IonTitle: React.FC<{
  className?: string;
  children?: React.ReactNode;
  size?: 'large' | 'small';
}>;

/** CSS Grid container */
const IonGrid: React.FC<{
  className?: string;
  children?: React.ReactNode;
  fixed?: boolean;
}>;

/** Grid row component */
const IonRow: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Grid column component */
const IonCol: React.FC<{
  className?: string;
  children?: React.ReactNode;
  size?: string;
  sizeSm?: string;
  sizeMd?: string;
  sizeLg?: string;
  sizeXl?: string;
  offset?: string;
  offsetSm?: string;
  offsetMd?: string;
  offsetLg?: string;
  offsetXl?: string;
}>;

import React from 'react';
import { IonGrid, IonRow, IonCol } from '@ionic/react';

const GridExample: React.FC = () => (
  <IonGrid>
    <IonRow>
      <IonCol size="6">
        Half width
      </IonCol>
      <IonCol size="6">
        Half width
      </IonCol>
    </IonRow>
  </IonGrid>
);

/**
 * Icon component with platform-specific logic and automatic icon resolution.
 */
const IonIcon: React.FC<{
  className?: string;
  color?: string;
  flipRtl?: boolean;
  icon?: any;
  ios?: any;
  lazy?: boolean;
  md?: any;
  mode?: 'ios' | 'md';
  name?: string;
  size?: 'small' | 'large';
  src?: string;
}>;

import React from 'react';
import { IonIcon } from '@ionic/react';
import { heart, heartOutline } from 'ionicons/icons';

const IconExample: React.FC = () => (
  <div>
    <IonIcon icon={heart} />
    <IonIcon ios={heartOutline} md={heart} />
  </div>
);