tessl/npm-ionic--react

React specific wrapper for @ionic/core providing React components and hooks for building cross-platform mobile applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@ionic/react

Name: tessl/npm-ionic--react
Author: tessl

@ionic/react is a React-specific wrapper for @ionic/core that provides React components, hooks, and utilities for building cross-platform mobile applications. It offers a comprehensive set of React components that wrap Ionic's web components, providing native React patterns like JSX props, React events, and TypeScript support while maintaining full compatibility with Ionic's theming system and native mobile capabilities.

Package Information

Package Name: @ionic/react
Package Type: npm
Language: TypeScript
Installation: npm install @ionic/react

Core Imports

import { 
  // Core components
  IonApp, IonPage, IonContent, IonButton, IonInput,
  // Overlay hooks
  useIonAlert, useIonModal, useIonToast, useIonActionSheet, 
  useIonPopover, useIonLoading, useIonPicker,
  // Lifecycle hooks
  useIonViewDidEnter, useIonViewWillEnter,
  // Setup and utilities
  setupIonicReact, isPlatform, createAnimation, createGesture,
  // Additional components
  IonFab, IonFabButton, IonDatetime, IonInfiniteScroll, IonRefresher
} from "@ionic/react";

For CommonJS:

const { 
  // Core components
  IonApp, IonPage, IonContent, IonButton, IonInput,
  // Overlay hooks
  useIonAlert, useIonModal, useIonToast, useIonActionSheet, 
  useIonPopover, useIonLoading, useIonPicker,
  // Lifecycle hooks
  useIonViewDidEnter, useIonViewWillEnter,
  // Setup and utilities
  setupIonicReact, isPlatform, createAnimation, createGesture,
  // Additional components
  IonFab, IonFabButton, IonDatetime, IonInfiniteScroll, IonRefresher
} = require("@ionic/react");

Basic Usage

import React from 'react';
import { IonApp, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, setupIonicReact } from '@ionic/react';

// Initialize Ionic React
setupIonicReact();

const MyApp: React.FC = () => (
  <IonApp>
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>My Ionic App</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton expand="block">Click Me</IonButton>
      </IonContent>
    </IonPage>
  </IonApp>
);

export default MyApp;

Architecture

@ionic/react is built around several key architectural patterns:

Component Wrappers: React components that wrap Ionic web components, providing seamless integration with React's virtual DOM
Hook-based APIs: React hooks for managing overlays, lifecycle events, and platform detection
Router Integration: Custom routing system that works with React Router while maintaining native-like navigation stacks
Platform Abstraction: Utilities for detecting and adapting to different platforms (iOS, Android, web)
Overlay Management: Declarative and imperative APIs for managing modals, alerts, toasts, and other overlays

Capabilities

Core Setup and Application Structure

Essential components and setup functions for initializing and structuring Ionic React applications.

function setupIonicReact(config?: IonicConfig): void;

interface IonicConfig {
  // Configuration interface is re-exported from @ionic/core
  // Contains numerous platform-specific settings for animations,
  // gestures, theming, and component behavior
  [key: string]: any;
}

Core Setup

UI Components

Comprehensive set of UI components for building mobile interfaces, including layout, forms, data display, and feedback components.

// Layout Components
const IonApp: React.FC<IonicReactProps>;
const IonPage: React.FC<IonicReactProps>;  
const IonContent: React.FC<IonicReactProps>;
const IonHeader: React.FC<IonicReactProps>;
const IonToolbar: React.FC<IonicReactProps>;

// Form Components
const IonInput: React.FC<IonicReactProps>;
const IonButton: React.FC<IonicReactProps>;
const IonCheckbox: React.FC<IonicReactProps>;
const IonToggle: React.FC<IonicReactProps>;

// Data Display
const IonList: React.FC<IonicReactProps>;
const IonItem: React.FC<IonicReactProps>;
const IonCard: React.FC<IonicReactProps>;

UI Components

Navigation and Routing

Complete routing system with stack management, tabs, and navigation components designed for mobile applications.

const IonRouterOutlet: React.FC<{
  basePath?: string;
  ionPage?: boolean;
}>;

const IonRoute: React.FC<{
  path?: string;
  exact?: boolean;
  render: (props?: any) => JSX.Element;
  disableIonPageManagement?: boolean;
}>;

const IonTabs: React.FC<{
  onIonTabsWillChange?: (event: any) => void;
  onIonTabsDidChange?: (event: any) => void;
}>;

Navigation and Routing

Overlay Management

React hooks for managing modal dialogs, alerts, toasts, action sheets, and other overlay components.

function useIonAlert(): [
  {
    (message: string, buttons?: AlertButton[]): Promise<void>;
    (options: AlertOptions): Promise<void>;
  },
  () => Promise<void>
];

function useIonModal(
  component: React.ComponentType<any>,
  componentProps?: any
): [
  (options?: ModalOptions) => Promise<void>,
  () => void
];

function useIonToast(): [
  (options: ToastOptions) => Promise<void>,
  () => void
];

Overlay Management

Lifecycle Management

React hooks for managing page lifecycle events and navigation state in mobile applications.

function useIonViewDidEnter(
  callback: LifeCycleCallback,
  deps?: any[]
): void;

function useIonViewWillEnter(
  callback: LifeCycleCallback,
  deps?: any[]
): void;

function useIonViewDidLeave(
  callback: LifeCycleCallback,
  deps?: any[]
): void;

Lifecycle Management

Platform Utilities

Utilities for platform detection, configuration management, and platform-specific adaptations.

function isPlatform(platform: Platforms): boolean;
function getPlatforms(): string[];
function getConfig(): IonicConfig | null;

type Platforms = 
  | 'ios' 
  | 'android' 
  | 'pwa' 
  | 'mobile' 
  | 'mobileweb' 
  | 'desktop'
  | 'hybrid';

Platform Utilities

Types

interface IonicReactProps {
  className?: string;
  style?: { [key: string]: any };
}

interface LifeCycleCallback {
  (): void | (() => void | undefined);
  id?: number;
}

interface AlertOptions {
  header?: string;
  subHeader?: string;
  message?: string;
  buttons?: (string | AlertButton)[];
  backdropDismiss?: boolean;
}

interface ModalOptions {
  component: React.ComponentType<any>;
  componentProps?: any;
  showBackdrop?: boolean;
  backdropDismiss?: boolean;
  cssClass?: string;
}

interface ToastOptions {
  message: string;
  duration?: number;
  position?: 'top' | 'middle' | 'bottom';
  color?: string;
  buttons?: ToastButton[];
}

interface RouteInfo {
  pathname: string;
  search: string;
  hash: string;
  state?: any;
}

interface RouterOptions {
  direction?: 'forward' | 'back' | 'root' | 'none';
  animated?: boolean;
}