0
# Core Setup and Application Structure
1

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

4
## Capabilities
5

6
### Application Initialization
7

8
Initialize Ionic React with global configuration options.
9

10
```typescript { .api }
11
/**
12
 * Initialize Ionic React with global configuration options.
13
 * Call this once at the start of your application before rendering any Ionic components.
14
 * @param config - Optional global configuration for Ionic React
15
 */
16
function setupIonicReact(config?: IonicConfig): void;
17

18
interface IonicConfig {
19
  /** Enable/disable ripple effect on interactive elements */
20
  rippleEffect?: boolean;
21
  /** Set the global mode for all components */
22
  mode?: 'ios' | 'android' | 'md';
23
  /** Enable/disable swipe-to-go-back gesture */
24
  swipeBackEnabled?: boolean;
25
  /** Enable/disable animations globally */
26
  animated?: boolean;
27
  // Note: IonicConfig is imported from @ionic/core and contains
28
  // many additional configuration options for platform-specific
29
  // behavior, theming, and component customization
30
  [key: string]: any;
31
}
32
```
33

34
**Usage Example:**
35

36
```typescript
37
import { setupIonicReact } from '@ionic/react';
38

39
setupIonicReact({
40
  rippleEffect: true,
41
  mode: 'ios',
42
  animated: true
43
});
44
```
45

46
### Root Application Component
47

48
The root container component that provides essential Ionic functionality and context.
49

50
```typescript { .api }
51
/**
52
 * Root application component that provides overlay management and Ionic context.
53
 * Must wrap all other Ionic components in your app.
54
 */
55
const IonApp: React.FC<{
56
  className?: string;
57
  children?: React.ReactNode;
58
}>;
59
```
60

61
**Usage Example:**
62

63
```typescript
64
import React from 'react';
65
import { IonApp } from '@ionic/react';
66

67
const App: React.FC = () => (
68
  <IonApp>
69
    {/* All your app content goes here */}
70
  </IonApp>
71
);
72
```
73

74
### Page Container Component
75

76
Intelligent page wrapper that provides proper styling and behavior for mobile pages.
77

78
```typescript { .api }
79
/**
80
 * Page container component that provides proper page styling and lifecycle management.
81
 * Works with or without the router and handles mobile-specific page transitions.
82
 */
83
const IonPage: React.FC<{
84
  className?: string;
85
  children?: React.ReactNode;
86
}>;
87
```
88

89
**Usage Example:**
90

91
```typescript
92
import React from 'react';
93
import { IonPage, IonContent } from '@ionic/react';
94

95
const HomePage: React.FC = () => (
96
  <IonPage>
97
    <IonContent>
98
      <h1>Welcome to my app!</h1>
99
    </IonContent>
100
  </IonPage>
101
);
102
```
103

104
### Content Area Component
105

106
Scrollable content area that handles safe areas and provides scroll events.
107

108
```typescript { .api }
109
/**
110
 * Scrollable content area component that handles safe areas and provides scroll functionality.
111
 * Typically used as a child of IonPage.
112
 */
113
const IonContent: React.FC<{
114
  className?: string;
115
  children?: React.ReactNode;
116
  scrollEvents?: boolean;
117
  onIonScroll?: (event: CustomEvent) => void;
118
  onIonScrollStart?: (event: CustomEvent) => void;
119
  onIonScrollEnd?: (event: CustomEvent) => void;
120
}>;
121
```
122

123
### Layout Components
124

125
Basic layout components for structuring page content.
126

127
```typescript { .api }
128
/** Page header section */
129
const IonHeader: React.FC<{
130
  className?: string;
131
  children?: React.ReactNode;
132
  translucent?: boolean;
133
}>;
134

135
/** Page footer section */
136
const IonFooter: React.FC<{
137
  className?: string;
138
  children?: React.ReactNode;
139
  translucent?: boolean;
140
}>;
141

142
/** Header/footer toolbar container */
143
const IonToolbar: React.FC<{
144
  className?: string;
145
  children?: React.ReactNode;
146
  color?: string;
147
}>;
148

149
/** Page/toolbar title */
150
const IonTitle: React.FC<{
151
  className?: string;
152
  children?: React.ReactNode;
153
  size?: 'large' | 'small';
154
}>;
155
```
156

157
### Grid System
158

159
CSS Grid-based layout system for responsive designs.
160

161
```typescript { .api }
162
/** CSS Grid container */
163
const IonGrid: React.FC<{
164
  className?: string;
165
  children?: React.ReactNode;
166
  fixed?: boolean;
167
}>;
168

169
/** Grid row component */
170
const IonRow: React.FC<{
171
  className?: string;
172
  children?: React.ReactNode;
173
}>;
174

175
/** Grid column component */
176
const IonCol: React.FC<{
177
  className?: string;
178
  children?: React.ReactNode;
179
  size?: string;
180
  sizeSm?: string;
181
  sizeMd?: string;
182
  sizeLg?: string;
183
  sizeXl?: string;
184
  offset?: string;
185
  offsetSm?: string;
186
  offsetMd?: string;
187
  offsetLg?: string;
188
  offsetXl?: string;
189
}>;
190
```
191

192
**Usage Example:**
193

194
```typescript
195
import React from 'react';
196
import { IonGrid, IonRow, IonCol } from '@ionic/react';
197

198
const GridExample: React.FC = () => (
199
  <IonGrid>
200
    <IonRow>
201
      <IonCol size="6">
202
        Half width
203
      </IonCol>
204
      <IonCol size="6">
205
        Half width
206
      </IonCol>
207
    </IonRow>
208
  </IonGrid>
209
);
210
```
211

212
### Icon Component
213

214
Platform-specific icon component with automatic icon resolution.
215

216
```typescript { .api }
217
/**
218
 * Icon component with platform-specific logic and automatic icon resolution.
219
 */
220
const IonIcon: React.FC<{
221
  className?: string;
222
  color?: string;
223
  flipRtl?: boolean;
224
  icon?: any;
225
  ios?: any;
226
  lazy?: boolean;
227
  md?: any;
228
  mode?: 'ios' | 'md';
229
  name?: string;
230
  size?: 'small' | 'large';
231
  src?: string;
232
}>;
233
```
234

235
**Usage Example:**
236

237
```typescript
238
import React from 'react';
239
import { IonIcon } from '@ionic/react';
240
import { heart, heartOutline } from 'ionicons/icons';
241

242
const IconExample: React.FC = () => (
243
  <div>
244
    <IonIcon icon={heart} />
245
    <IonIcon ios={heartOutline} md={heart} />
246
  </div>
247
);
248
```