Skip to content

Commit b83e009

Browse files
elylucaselylucas
authored
feat(react): add react hooks to control overlay components (#22484)
1 parent dd1c8db commit b83e009

File tree

25 files changed

+1313
-0
lines changed

25 files changed

+1313
-0
lines changed

‎core/src/components/action-sheet/readme.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,59 @@ async function presentActionSheet() {
155155
### React
156156

157157
```tsx
158+
/* Using with useIonActionSheet Hook */
159+
160+
import React from 'react';
161+
import {
162+
IonButton,
163+
IonContent,
164+
IonPage,
165+
useIonActionSheet,
166+
} from '@ionic/react';
167+
168+
const ActionSheetExample: React.FC = () => {
169+
const [present, dismiss] = useIonActionSheet();
170+
171+
return (
172+
<IonPage>
173+
<IonContent>
174+
<IonButton
175+
expand="block"
176+
onClick={() =>
177+
present({
178+
buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
179+
header: 'Action Sheet'
180+
})
181+
}
182+
>
183+
Show ActionSheet
184+
</IonButton>
185+
<IonButton
186+
expand="block"
187+
onClick={() =>
188+
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
189+
}
190+
>
191+
Show ActionSheet using params
192+
</IonButton>
193+
<IonButton
194+
expand="block"
195+
onClick={() => {
196+
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
197+
setTimeout(dismiss, 3000);
198+
}}
199+
>
200+
Show ActionSheet, hide after 3 seconds
201+
</IonButton>
202+
</IonContent>
203+
</IonPage>
204+
);
205+
};
206+
```
207+
208+
```tsx
209+
/* Using with IonActionSheet Component */
210+
158211
import React, { useState } from 'react';
159212
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
160213
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

‎core/src/components/action-sheet/usage/react.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,57 @@
11
```tsx
2+
/* Using with useIonActionSheet Hook */
3+
4+
import React from 'react';
5+
import {
6+
IonButton,
7+
IonContent,
8+
IonPage,
9+
useIonActionSheet,
10+
} from '@ionic/react';
11+
12+
const ActionSheetExample: React.FC = () => {
13+
const [present, dismiss] = useIonActionSheet();
14+
15+
return (
16+
<IonPage>
17+
<IonContent>
18+
<IonButton
19+
expand="block"
20+
onClick={() =>
21+
present({
22+
buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
23+
header: 'Action Sheet'
24+
})
25+
}
26+
>
27+
Show ActionSheet
28+
</IonButton>
29+
<IonButton
30+
expand="block"
31+
onClick={() =>
32+
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
33+
}
34+
>
35+
Show ActionSheet using params
36+
</IonButton>
37+
<IonButton
38+
expand="block"
39+
onClick={() => {
40+
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
41+
setTimeout(dismiss, 3000);
42+
}}
43+
>
44+
Show ActionSheet, hide after 3 seconds
45+
</IonButton>
46+
</IonContent>
47+
</IonPage>
48+
);
49+
};
50+
```
51+
52+
```tsx
53+
/* Using with IonActionSheet Component */
54+
255
import React, { useState } from 'react';
356
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
457
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

‎core/src/components/alert/readme.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -588,6 +588,48 @@ function presentAlertCheckbox() {
588588
### React
589589

590590
```tsx
591+
/* Using with useIonAlert Hook */
592+
593+
import React from 'react';
594+
import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react';
595+
596+
const AlertExample: React.FC = () => {
597+
const [present] = useIonAlert();
598+
return (
599+
<IonPage>
600+
<IonContent fullscreen>
601+
<IonButton
602+
expand="block"
603+
onClick={() =>
604+
present({
605+
cssClass: 'my-css',
606+
header: 'Alert',
607+
message: 'alert from hook',
608+
buttons: [
609+
'Cancel',
610+
{ text: 'Ok', handler: (d) => console.log('ok pressed') },
611+
],
612+
onDidDismiss: (e) => console.log('did dismiss'),
613+
})
614+
}
615+
>
616+
Show Alert
617+
</IonButton>
618+
<IonButton
619+
expand="block"
620+
onClick={() => present('hello with params', [{ text: 'Ok' }])}
621+
>
622+
Show Alert using params
623+
</IonButton>
624+
</IonContent>
625+
</IonPage>
626+
);
627+
};
628+
```
629+
630+
```tsx
631+
/* Using with IonAlert Component */
632+
591633
import React, { useState } from 'react';
592634
import { IonAlert, IonButton, IonContent } from '@ionic/react';
593635

‎core/src/components/alert/usage/react.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
11
```tsx
2+
/* Using with useIonAlert Hook */
3+
4+
import React from 'react';
5+
import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react';
6+
7+
const AlertExample: React.FC = () => {
8+
const [present] = useIonAlert();
9+
return (
10+
<IonPage>
11+
<IonContent fullscreen>
12+
<IonButton
13+
expand="block"
14+
onClick={() =>
15+
present({
16+
cssClass: 'my-css',
17+
header: 'Alert',
18+
message: 'alert from hook',
19+
buttons: [
20+
'Cancel',
21+
{ text: 'Ok', handler: (d) => console.log('ok pressed') },
22+
],
23+
onDidDismiss: (e) => console.log('did dismiss'),
24+
})
25+
}
26+
>
27+
Show Alert
28+
</IonButton>
29+
<IonButton
30+
expand="block"
31+
onClick={() => present('hello with params', [{ text: 'Ok' }])}
32+
>
33+
Show Alert using params
34+
</IonButton>
35+
</IonContent>
36+
</IonPage>
37+
);
38+
};
39+
```
40+
41+
```tsx
42+
/* Using with IonAlert Component */
43+
244
import React, { useState } from 'react';
345
import { IonAlert, IonButton, IonContent } from '@ionic/react';
446

‎core/src/components/loading/readme.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,43 @@ async function presentLoadingWithOptions() {
131131
### React
132132

133133
```tsx
134+
/* Using with useIonLoading Hook */
135+
136+
import React from 'react';
137+
import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';
138+
139+
interface LoadingProps {}
140+
141+
const LoadingExample: React.FC<LoadingProps> = () => {
142+
const [present] = useIonLoading();
143+
return (
144+
<IonPage>
145+
<IonContent>
146+
<IonButton
147+
expand="block"
148+
onClick={() =>
149+
present({
150+
duration: 3000,
151+
})
152+
}
153+
>
154+
Show Loading
155+
</IonButton>
156+
<IonButton
157+
expand="block"
158+
onClick={() => present('Loading', 2000, 'dots')}
159+
>
160+
Show Loading using params
161+
</IonButton>
162+
</IonContent>
163+
</IonPage>
164+
);
165+
};
166+
```
167+
168+
```tsx
169+
/* Using with IonLoading Component */
170+
134171
import React, { useState } from 'react';
135172
import { IonLoading, IonButton, IonContent } from '@ionic/react';
136173

‎core/src/components/loading/usage/react.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,41 @@
11
```tsx
2+
/* Using with useIonLoading Hook */
3+
4+
import React from 'react';
5+
import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';
6+
7+
interface LoadingProps {}
8+
9+
const LoadingExample: React.FC<LoadingProps> = () => {
10+
const [present] = useIonLoading();
11+
return (
12+
<IonPage>
13+
<IonContent>
14+
<IonButton
15+
expand="block"
16+
onClick={() =>
17+
present({
18+
duration: 3000,
19+
})
20+
}
21+
>
22+
Show Loading
23+
</IonButton>
24+
<IonButton
25+
expand="block"
26+
onClick={() => present('Loading', 2000, 'dots')}
27+
>
28+
Show Loading using params
29+
</IonButton>
30+
</IonContent>
31+
</IonPage>
32+
);
33+
};
34+
```
35+
36+
```tsx
37+
/* Using with IonLoading Component */
38+
239
import React, { useState } from 'react';
340
import { IonLoading, IonButton, IonContent } from '@ionic/react';
441

‎core/src/components/modal/readme.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -332,6 +332,70 @@ modalElement.presentingElement = await modalController.getTop(); // Get the top-
332332
### React
333333
334334
```tsx
335+
/* Using with useIonModal Hook */
336+
337+
import React, { useState } from 'react';
338+
import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react';
339+
340+
const Body: React.FC<{
341+
count: number;
342+
onDismiss: () => void;
343+
onIncrement: () => void;
344+
}> = ({ count, onDismiss, onIncrement }) => (
345+
<div>
346+
count: {count}
347+
<IonButton expand="block" onClick={() => onIncrement()}>
348+
Increment Count
349+
</IonButton>
350+
<IonButton expand="block" onClick={() => onDismiss()}>
351+
Close
352+
</IonButton>
353+
</div>
354+
);
355+
356+
const ModalExample: React.FC = () => {
357+
const [count, setCount] = useState(0);
358+
359+
const handleIncrement = () => {
360+
setCount(count + 1);
361+
};
362+
363+
const handleDismiss = () => {
364+
dismiss();
365+
};
366+
367+
/**
368+
* First parameter is the component to show, second is the props to pass
369+
*/
370+
const [present, dismiss] = useIonModal(Body, {
371+
count,
372+
onDismiss: handleDismiss,
373+
onIncrement: handleIncrement,
374+
});
375+
376+
return (
377+
<IonPage>
378+
<IonContent fullscreen>
379+
<IonButton
380+
expand="block"
381+
onClick={() => {
382+
present({
383+
cssClass: 'my-class',
384+
});
385+
}}
386+
>
387+
Show Modal
388+
</IonButton>
389+
<div>Count: {count}</div>
390+
</IonContent>
391+
</IonPage>
392+
);
393+
};
394+
```
395+
396+
```tsx
397+
/* Using with IonModal Component */
398+
335399
import React, { useState } from 'react';
336400
import { IonModal, IonButton, IonContent } from '@ionic/react';
337401

0 commit comments

Comments
 (0)