CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

ui-components.mddocs/

UI Components

Comprehensive set of UI components for building mobile interfaces, including form controls, data display, feedback elements, and interactive components.

Capabilities

Form Controls

Interactive form elements with built-in validation and mobile-optimized behavior.

/** Text input component with mobile-specific behavior */
const IonInput: React.FC<{
  className?: string;
  value?: string;
  placeholder?: string;
  type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
  clearInput?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  onIonInput?: (event: CustomEvent) => void;
  onIonChange?: (event: CustomEvent) => void;
  onIonBlur?: (event: CustomEvent) => void;
  onIonFocus?: (event: CustomEvent) => void;
}>;

/** Multi-line text input component */
const IonTextarea: React.FC<{
  className?: string;
  value?: string;
  placeholder?: string;
  rows?: number;
  cols?: number;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  onIonInput?: (event: CustomEvent) => void;
  onIonChange?: (event: CustomEvent) => void;
}>;

/** Checkbox input component */
const IonCheckbox: React.FC<{
  className?: string;
  checked?: boolean;
  disabled?: boolean;
  indeterminate?: boolean;
  onIonChange?: (event: CustomEvent) => void;
}>;

/** Toggle switch input */
const IonToggle: React.FC<{
  className?: string;
  checked?: boolean;
  disabled?: boolean;
  onIonChange?: (event: CustomEvent) => void;
}>;

/** Radio button input */
const IonRadio: React.FC<{
  className?: string;
  value: any;
  disabled?: boolean;
  onIonSelect?: (event: CustomEvent) => void;
}>;

/** Radio button group */
const IonRadioGroup: React.FC<{
  className?: string;
  value?: any;
  allowEmptySelection?: boolean;
  onIonChange?: (event: CustomEvent) => void;
  children?: React.ReactNode;
}>;

/** Range slider input */
const IonRange: React.FC<{
  className?: string;
  value?: number | { lower: number; upper: number };
  min?: number;
  max?: number;
  step?: number;
  snaps?: boolean;
  ticks?: boolean;
  dual?: boolean;
  disabled?: boolean;
  onIonChange?: (event: CustomEvent) => void;
}>;

Select Components

Dropdown and picker components for selecting from lists of options.

/** Select dropdown component */
const IonSelect: React.FC<{
  className?: string;
  value?: any;
  placeholder?: string;
  multiple?: boolean;
  disabled?: boolean;
  interface?: 'alert' | 'popover' | 'action-sheet';
  interfaceOptions?: any;
  onIonChange?: (event: CustomEvent) => void;
  children?: React.ReactNode;
}>;

/** Select option item */
const IonSelectOption: React.FC<{
  className?: string;
  value: any;
  disabled?: boolean;
  children?: React.ReactNode;
}>;

/** Date/time picker component */
const IonDatetime: React.FC<{
  className?: string;
  value?: string;
  min?: string;
  max?: string;
  presentation?: 'date' | 'time' | 'date-time' | 'time-date' | 'month' | 'month-year' | 'year';
  showDefaultButtons?: boolean;
  showClearButton?: boolean;
  onIonChange?: (event: CustomEvent) => void;
}>;

/** Button to trigger datetime picker */
const IonDatetimeButton: React.FC<{
  className?: string;
  datetime: string;
  disabled?: boolean;
}>;

Button Components

Interactive button components with various styles and behaviors.

/** Primary button component with routing capabilities */
const IonButton: React.FC<{
  className?: string;
  children?: React.ReactNode;
  color?: string;
  disabled?: boolean;
  expand?: 'full' | 'block';
  fill?: 'clear' | 'outline' | 'solid';
  size?: 'small' | 'default' | 'large';
  strong?: boolean;
  type?: 'button' | 'submit' | 'reset';
  routerLink?: string;
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
  onClick?: (event: React.MouseEvent) => void;
}>;

/** Container for header/toolbar buttons */
const IonButtons: React.FC<{
  className?: string;
  children?: React.ReactNode;
  slot?: 'start' | 'end' | 'primary' | 'secondary';
}>;

/** Floating Action Button container */
const IonFab: React.FC<{
  className?: string;
  children?: React.ReactNode;
  horizontal?: 'start' | 'end' | 'center';
  vertical?: 'top' | 'bottom' | 'center';
  edge?: boolean;
}>;

/** Individual FAB button */
const IonFabButton: React.FC<{
  className?: string;
  children?: React.ReactNode;
  color?: string;
  disabled?: boolean;
  size?: 'small';
  routerLink?: string;
  onClick?: (event: React.MouseEvent) => void;
}>;

Data Display Components

Components for displaying structured data and content.

/** List container */
const IonList: React.FC<{
  className?: string;
  children?: React.ReactNode;
  inset?: boolean;
}>;

/** List item container with routing capabilities */
const IonItem: React.FC<{
  className?: string;
  children?: React.ReactNode;
  button?: boolean;
  disabled?: boolean;
  download?: string;
  href?: string;
  rel?: string;
  target?: string;
  type?: 'button' | 'submit' | 'reset';
  routerLink?: string;
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
  onClick?: (event: React.MouseEvent) => void;
}>;

/** Text label component */
const IonLabel: React.FC<{
  className?: string;
  children?: React.ReactNode;
  position?: 'fixed' | 'stacked' | 'floating';
}>;

/** Card container component */
const IonCard: React.FC<{
  className?: string;
  children?: React.ReactNode;
  button?: boolean;
  disabled?: boolean;
  download?: string;
  href?: string;
  rel?: string;
  target?: string;
  type?: 'button' | 'submit' | 'reset';
  routerLink?: string;
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
}>;

/** Card content area */
const IonCardContent: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Card header section */
const IonCardHeader: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Card title text */
const IonCardTitle: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Card subtitle text */
const IonCardSubtitle: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

Feedback and Status Components

Components for providing user feedback and displaying status information.

/** Small notification badge */
const IonBadge: React.FC<{
  className?: string;
  children?: React.ReactNode;
  color?: string;
}>;

/** Small informational element */
const IonChip: React.FC<{
  className?: string;
  children?: React.ReactNode;
  color?: string;
  outline?: boolean;
}>;

/** Progress indicator */
const IonProgressBar: React.FC<{
  className?: string;
  value?: number;
  buffer?: number;
  type?: 'determinate' | 'indeterminate';
  reversed?: boolean;
  color?: string;
}>;

/** Loading spinner */
const IonSpinner: React.FC<{
  className?: string;
  color?: string;
  duration?: number;
  name?: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-small';
  paused?: boolean;
}>;

/** Loading placeholder text */
const IonSkeletonText: React.FC<{
  className?: string;
  animated?: boolean;
}>;

Media Components

Components for displaying images and media content.

/** Lazy-loaded image component */
const IonImg: React.FC<{
  className?: string;
  src?: string;
  alt?: string;
  onIonImgWillLoad?: (event: CustomEvent) => void;
  onIonImgDidLoad?: (event: CustomEvent) => void;
  onIonError?: (event: CustomEvent) => void;
}>;

/** Circular avatar/profile image */
const IonAvatar: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Small preview image */
const IonThumbnail: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

Segmented Controls

Components for creating segmented control interfaces.

/** Segmented control container */
const IonSegment: React.FC<{
  className?: string;
  children?: React.ReactNode;
  value?: string;
  disabled?: boolean;
  onIonChange?: (event: CustomEvent) => void;
}>;

/** Individual segment button */
const IonSegmentButton: React.FC<{
  className?: string;
  children?: React.ReactNode;
  value: string;
  disabled?: boolean;
  type?: 'button' | 'submit' | 'reset';
}>;

Search Components

Components for implementing search functionality.

/** Search input component */
const IonSearchbar: React.FC<{
  className?: string;
  value?: string;
  placeholder?: string;
  showClearButton?: 'always' | 'focus' | 'never';
  showCancelButton?: 'always' | 'focus' | 'never';
  cancelButtonText?: string;
  clearIcon?: any;
  searchIcon?: any;
  disabled?: boolean;
  onIonInput?: (event: CustomEvent) => void;
  onIonChange?: (event: CustomEvent) => void;
  onIonCancel?: (event: CustomEvent) => void;
  onIonClear?: (event: CustomEvent) => void;
}>;

Floating Action Button Components

Components for creating floating action buttons and button groups.

/** Floating action button container */
const IonFab: React.FC<{
  className?: string;
  children?: React.ReactNode;
  horizontal?: 'start' | 'end' | 'center';
  vertical?: 'top' | 'bottom' | 'center';
  edge?: boolean;
  activated?: boolean;
}>;

/** Floating action button */
const IonFabButton: React.FC<{
  className?: string;
  children?: React.ReactNode;
  size?: 'small';
  color?: string;
  disabled?: boolean;
  activated?: boolean;
  closeIcon?: string;
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
  onClick?: (event: any) => void;
}>;

/** List of floating action buttons */
const IonFabList: React.FC<{
  className?: string;
  children?: React.ReactNode;
  activated?: boolean;
  side?: 'start' | 'end' | 'top' | 'bottom';
}>;

Date and Time Components

Components for selecting dates and times.

/** Date and time picker */
const IonDatetime: React.FC<{
  className?: string;
  value?: string | string[];
  placeholder?: string;
  min?: string;
  max?: string;
  disabled?: boolean;
  readonly?: boolean;
  presentation?: 'date' | 'time' | 'date-time' | 'time-date' | 'month' | 'month-year' | 'year';
  preferWheel?: boolean;
  showDefaultButtons?: boolean;
  showDefaultTitle?: boolean;
  showDefaultTimeLabel?: boolean;
  hourCycle?: 'h12' | 'h23';
  onIonChange?: (event: CustomEvent) => void;
  onIonCancel?: (event: CustomEvent) => void;
}>;

/** Button that triggers datetime picker */
const IonDatetimeButton: React.FC<{
  className?: string;
  datetime?: string;
  disabled?: boolean;
}>;

Scroll and Refresh Components

Components for implementing infinite scroll and pull-to-refresh functionality.

/** Infinite scroll trigger */
const IonInfiniteScroll: React.FC<{
  className?: string;
  children?: React.ReactNode;
  threshold?: string;
  disabled?: boolean;
  position?: 'top' | 'bottom';
  onIonInfinite?: (event: CustomEvent) => void;
}>;

/** Infinite scroll content */
const IonInfiniteScrollContent: React.FC<{
  className?: string;
  loadingSpinner?: string;
  loadingText?: string;
}>;

/** Pull-to-refresh container */
const IonRefresher: React.FC<{
  className?: string;
  children?: React.ReactNode;
  disabled?: boolean;
  pullFactor?: number;
  pullMin?: number;
  pullMax?: number;
  closeDuration?: string;
  snapbackDuration?: string;
  onIonRefresh?: (event: CustomEvent) => void;
}>;

/** Pull-to-refresh content */
const IonRefresherContent: React.FC<{
  className?: string;
  pullingIcon?: string;
  pullingText?: string;
  refreshingSpinner?: string;
  refreshingText?: string;
}>;

Accordion Components

Expandable content sections.

/** Accordion group container */
const IonAccordionGroup: React.FC<{
  className?: string;
  children?: React.ReactNode;
  animated?: boolean;
  multiple?: boolean;
  value?: string | string[];
  disabled?: boolean;
  readonly?: boolean;
  expand?: 'compact' | 'inset';
  onIonChange?: (event: CustomEvent) => void;
}>;

/** Individual accordion item */
const IonAccordion: React.FC<{
  className?: string;
  children?: React.ReactNode;
  value: string;
  disabled?: boolean;
  readonly?: boolean;
  toggleIcon?: string;
  toggleIconSlot?: 'start' | 'end';
}>;

Reorder Components

Components for drag-and-drop reordering of list items.

/** Reorderable list container */
const IonReorderGroup: React.FC<{
  className?: string;
  children?: React.ReactNode;
  disabled?: boolean;
  onIonItemReorder?: (event: CustomEvent) => void;
}>;

/** Reorder handle */
const IonReorder: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

Picker Components

Column-based picker components.

/** Picker container */
const IonPicker: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Picker column */
const IonPickerColumn: React.FC<{
  className?: string;
  children?: React.ReactNode;
}>;

/** Picker column option */
const IonPickerColumnOption: React.FC<{
  className?: string;
  children?: React.ReactNode;
  value?: any;
  disabled?: boolean;
}>;

Breadcrumb Components

Navigation breadcrumb components.

/** Breadcrumb navigation container */
const IonBreadcrumbs: React.FC<{
  className?: string;
  children?: React.ReactNode;
  color?: string;
  maxItems?: number;
  itemsAfterCollapse?: number;
  itemsBeforeCollapse?: number;
}>;

/** Individual breadcrumb item */
const IonBreadcrumb: React.FC<{
  className?: string;
  children?: React.ReactNode;
  href?: string;
  target?: string;
  download?: string;
  rel?: string;
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
  routerAnimation?: any;
  active?: boolean;
  disabled?: boolean;
}>;

Additional Components

Other utility and interactive components.

/** Ripple effect overlay */
const IonRippleEffect: React.FC<{
  className?: string;
  type?: 'bounded' | 'unbounded';
}>;

/** Split pane layout */
const IonSplitPane: React.FC<{
  className?: string;
  children?: React.ReactNode;
  contentId?: string;
  disabled?: boolean;
  when?: string | boolean;
  onIonSplitPaneVisible?: (event: CustomEvent) => void;
}>;

/** Backdrop overlay */
const IonBackdrop: React.FC<{
  className?: string;
  tappable?: boolean;
  stopPropagation?: boolean;
  visible?: boolean;
  onIonBackdropTap?: (event: CustomEvent) => void;
}>;

Usage Examples:

import React, { useState } from 'react';
import { 
  IonInput, IonButton, IonCheckbox, IonItem, IonLabel, 
  IonList, IonCard, IonCardContent, IonCardHeader, IonCardTitle 
} from '@ionic/react';

const FormExample: React.FC = () => {
  const [name, setName] = useState('');
  const [agreed, setAgreed] = useState(false);

  return (
    <IonList>
      <IonItem>
        <IonLabel position="stacked">Name</IonLabel>
        <IonInput 
          value={name}
          onIonInput={(e) => setName(e.detail.value!)}
          placeholder="Enter your name"
        />
      </IonItem>
      
      <IonItem>
        <IonCheckbox 
          checked={agreed}
          onIonChange={(e) => setAgreed(e.detail.checked)}
        />
        <IonLabel>I agree to the terms</IonLabel>
      </IonItem>
      
      <IonItem>
        <IonButton 
          expand="block" 
          disabled={!name || !agreed}
        >
          Submit
        </IonButton>
      </IonItem>
    </IonList>
  );
};

const CardExample: React.FC = () => (
  <IonCard>
    <IonCardHeader>
      <IonCardTitle>Welcome</IonCardTitle>
    </IonCardHeader>
    <IonCardContent>
      This is a sample card with content.
    </IonCardContent>
  </IonCard>
);

docs

core-setup.md

index.md

lifecycle-management.md

navigation-routing.md

overlay-management.md

platform-utilities.md

ui-components.md

tile.json