javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): add react hooks to control overlay components (#22484)

Browse Source
This commit is contained in:
Ely Lucas
2021-03-01 09:34:13 -07:00
committed by GitHub
parent dd1c8dbf3b
commit b83e00934e
25 changed files with 1313 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
core/src/components/action-sheet/readme.md
View File

@ -155,6 +155,59 @@ async function presentActionSheet() {
### React
```tsx
/* Using with useIonActionSheet Hook */
import React from 'react';
import {
IonButton,
IonContent,
IonPage,
useIonActionSheet,
} from '@ionic/react';
const ActionSheetExample: React.FC = () => {
const [present, dismiss] = useIonActionSheet();
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
header: 'Action Sheet'
})
}
>
Show ActionSheet
</IonButton>
<IonButton
expand="block"
onClick={() =>
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
}
>
Show ActionSheet using params
</IonButton>
<IonButton
expand="block"
onClick={() => {
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
setTimeout(dismiss, 3000);
}}
>
Show ActionSheet, hide after 3 seconds
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonActionSheet Component */
import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

53
core/src/components/action-sheet/usage/react.md
View File

@ -1,4 +1,57 @@
```tsx
/* Using with useIonActionSheet Hook */
import React from 'react';
import {
IonButton,
IonContent,
IonPage,
useIonActionSheet,
} from '@ionic/react';
const ActionSheetExample: React.FC = () => {
const [present, dismiss] = useIonActionSheet();
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
header: 'Action Sheet'
})
}
>
Show ActionSheet
</IonButton>
<IonButton
expand="block"
onClick={() =>
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
}
>
Show ActionSheet using params
</IonButton>
<IonButton
expand="block"
onClick={() => {
present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
setTimeout(dismiss, 3000);
}}
>
Show ActionSheet, hide after 3 seconds
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonActionSheet Component */
import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

42
core/src/components/alert/readme.md
View File

@ -588,6 +588,48 @@ function presentAlertCheckbox() {
### React
```tsx
/* Using with useIonAlert Hook */
import React from 'react';
import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react';
const AlertExample: React.FC = () => {
const [present] = useIonAlert();
return (
<IonPage>
<IonContent fullscreen>
<IonButton
expand="block"
onClick={() =>
present({
cssClass: 'my-css',
header: 'Alert',
message: 'alert from hook',
buttons: [
'Cancel',
{ text: 'Ok', handler: (d) => console.log('ok pressed') },
],
onDidDismiss: (e) => console.log('did dismiss'),
})
}
>
Show Alert
</IonButton>
<IonButton
expand="block"
onClick={() => present('hello with params', [{ text: 'Ok' }])}
>
Show Alert using params
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonAlert Component */
import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';

42
core/src/components/alert/usage/react.md
View File

@ -1,4 +1,46 @@
```tsx
/* Using with useIonAlert Hook */
import React from 'react';
import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react';
const AlertExample: React.FC = () => {
const [present] = useIonAlert();
return (
<IonPage>
<IonContent fullscreen>
<IonButton
expand="block"
onClick={() =>
present({
cssClass: 'my-css',
header: 'Alert',
message: 'alert from hook',
buttons: [
'Cancel',
{ text: 'Ok', handler: (d) => console.log('ok pressed') },
],
onDidDismiss: (e) => console.log('did dismiss'),
})
}
>
Show Alert
</IonButton>
<IonButton
expand="block"
onClick={() => present('hello with params', [{ text: 'Ok' }])}
>
Show Alert using params
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonAlert Component */
import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';

37
core/src/components/loading/readme.md
View File

@ -131,6 +131,43 @@ async function presentLoadingWithOptions() {
### React
```tsx
/* Using with useIonLoading Hook */
import React from 'react';
import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';
interface LoadingProps {}
const LoadingExample: React.FC<LoadingProps> = () => {
const [present] = useIonLoading();
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
duration: 3000,
})
}
>
Show Loading
</IonButton>
<IonButton
expand="block"
onClick={() => present('Loading', 2000, 'dots')}
>
Show Loading using params
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonLoading Component */
import React, { useState } from 'react';
import { IonLoading, IonButton, IonContent } from '@ionic/react';

37
core/src/components/loading/usage/react.md
View File

@ -1,4 +1,41 @@
```tsx
/* Using with useIonLoading Hook */
import React from 'react';
import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react';
interface LoadingProps {}
const LoadingExample: React.FC<LoadingProps> = () => {
const [present] = useIonLoading();
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
duration: 3000,
})
}
>
Show Loading
</IonButton>
<IonButton
expand="block"
onClick={() => present('Loading', 2000, 'dots')}
>
Show Loading using params
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonLoading Component */
import React, { useState } from 'react';
import { IonLoading, IonButton, IonContent } from '@ionic/react';

64
core/src/components/modal/readme.md
View File

@ -332,6 +332,70 @@ modalElement.presentingElement = await modalController.getTop(); // Get the top-
### React
```tsx
/* Using with useIonModal Hook */
import React, { useState } from 'react';
import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react';
const Body: React.FC<{
count: number;
onDismiss: () => void;
onIncrement: () => void;
}> = ({ count, onDismiss, onIncrement }) => (
<div>
count: {count}
<IonButton expand="block" onClick={() => onIncrement()}>
Increment Count
</IonButton>
<IonButton expand="block" onClick={() => onDismiss()}>
Close
</IonButton>
</div>
);
const ModalExample: React.FC = () => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
const handleDismiss = () => {
dismiss();
};
/**
* First parameter is the component to show, second is the props to pass
*/
const [present, dismiss] = useIonModal(Body, {
count,
onDismiss: handleDismiss,
onIncrement: handleIncrement,
});
return (
<IonPage>
<IonContent fullscreen>
<IonButton
expand="block"
onClick={() => {
present({
cssClass: 'my-class',
});
}}
>
Show Modal
</IonButton>
<div>Count: {count}</div>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonModal Component */
import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';

64
core/src/components/modal/usage/react.md
View File

@ -1,4 +1,68 @@
```tsx
/* Using with useIonModal Hook */
import React, { useState } from 'react';
import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react';
const Body: React.FC<{
count: number;
onDismiss: () => void;
onIncrement: () => void;
}> = ({ count, onDismiss, onIncrement }) => (
<div>
count: {count}
<IonButton expand="block" onClick={() => onIncrement()}>
Increment Count
</IonButton>
<IonButton expand="block" onClick={() => onDismiss()}>
Close
</IonButton>
</div>
);
const ModalExample: React.FC = () => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
const handleDismiss = () => {
dismiss();
};
/**
* First parameter is the component to show, second is the props to pass
*/
const [present, dismiss] = useIonModal(Body, {
count,
onDismiss: handleDismiss,
onIncrement: handleIncrement,
});
return (
<IonPage>
<IonContent fullscreen>
<IonButton
expand="block"
onClick={() => {
present({
cssClass: 'my-class',
});
}}
>
Show Modal
</IonButton>
<div>Count: {count}</div>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonModal Component */
import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';

89
core/src/components/picker/readme.md
View File

@ -7,6 +7,95 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
<!-- Auto Generated Below -->
## Usage
### React
```tsx
/* Using with useIonPicker Hook */
import React, { useState } from 'react';
import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';
const PickerExample: React.FC = () => {
const [present] = useIonPicker();
const [value, setValue] = useState('');
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [
{
text: 'Confirm',
handler: (selected) => {
setValue(selected.animal.value)
},
},
],
columns: [
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
],
})
}
>
Show Picker
</IonButton>
<IonButton
expand="block"
onClick={() =>
present(
[
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
{
name: 'vehicle',
options: [
{ text: 'Car', value: 'car' },
{ text: 'Truck', value: 'truck' },
{ text: 'Bike', value: 'bike' },
],
},
],
[
{
text: 'Confirm',
handler: (selected) => {
setValue(`${selected.animal.value}, ${selected.vehicle.value}`)
},
},
]
)
}
>
Show Picker using params
</IonButton>
{value && (
<div>Selected Value: {value}</div>
)}
</IonContent>
</IonPage>
);
};
```
## Properties
| Property | Attribute | Description | Type | Default |

82
core/src/components/picker/usage/react.md Normal file
View File

@ -0,0 +1,82 @@
```tsx
/* Using with useIonPicker Hook */
import React, { useState } from 'react';
import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';
const PickerExample: React.FC = () => {
const [present] = useIonPicker();
const [value, setValue] = useState('');
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [
{
text: 'Confirm',
handler: (selected) => {
setValue(selected.animal.value)
},
},
],
columns: [
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
],
})
}
>
Show Picker
</IonButton>
<IonButton
expand="block"
onClick={() =>
present(
[
{
name: 'animal',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Bird', value: 'bird' },
],
},
{
name: 'vehicle',
options: [
{ text: 'Car', value: 'car' },
{ text: 'Truck', value: 'truck' },
{ text: 'Bike', value: 'bike' },
],
},
],
[
{
text: 'Confirm',
handler: (selected) => {
setValue(`${selected.animal.value}, ${selected.vehicle.value}`)
},
},
]
)
}
>
Show Picker using params
</IonButton>
{value && (
<div>Selected Value: {value}</div>
)}
</IonContent>
</IonPage>
);
};
```

53
core/src/components/popover/readme.md
View File

@ -114,6 +114,59 @@ function presentPopover(ev) {
### React
```tsx
/* Using with useIonPopover Hook */
import React from 'react';
import {
IonButton,
IonContent,
IonItem,
IonList,
IonListHeader,
IonPage,
useIonPopover,
} from '@ionic/react';
const PopoverList: React.FC<{
onHide: () => void;
}> = ({ onHide }) => (
<IonList>
<IonListHeader>Ionic</IonListHeader>
<IonItem button>Learn Ionic</IonItem>
<IonItem button>Documentation</IonItem>
<IonItem button>Showcase</IonItem>
<IonItem button>GitHub Repo</IonItem>
<IonItem lines="none" detail={false} button onClick={onHide}>
Close
</IonItem>
</IonList>
);
const PopoverExample: React.FC = () => {
const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={(e) =>
present({
event: e.nativeEvent,
})
}
>
Show Popover
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonPopover Component */
import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';

53
core/src/components/popover/usage/react.md
View File

@ -1,4 +1,57 @@
```tsx
/* Using with useIonPopover Hook */
import React from 'react';
import {
IonButton,
IonContent,
IonItem,
IonList,
IonListHeader,
IonPage,
useIonPopover,
} from '@ionic/react';
const PopoverList: React.FC<{
onHide: () => void;
}> = ({ onHide }) => (
<IonList>
<IonListHeader>Ionic</IonListHeader>
<IonItem button>Learn Ionic</IonItem>
<IonItem button>Documentation</IonItem>
<IonItem button>Showcase</IonItem>
<IonItem button>GitHub Repo</IonItem>
<IonItem lines="none" detail={false} button onClick={onHide}>
Close
</IonItem>
</IonList>
);
const PopoverExample: React.FC = () => {
const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() });
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={(e) =>
present({
event: e.nativeEvent,
})
}
>
Show Popover
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using with IonPopover Component */
import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';

42
core/src/components/toast/readme.md
View File

@ -111,6 +111,48 @@ async function presentToastWithOptions() {
### React
```tsx
/* Using the useIonToast Hook */
import React from 'react';
import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react';
const ToastExample: React.FC = () => {
const [present, dismiss] = useIonToast();
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'hide', handler: () => dismiss() }],
message: 'toast from hook, click hide to dismiss',
onDidDismiss: () => console.log('dismissed'),
onWillDismiss: () => console.log('will dismiss'),
})
}
>
Show Toast
</IonButton>
<IonButton
expand="block"
onClick={() => present('hello from hook', 3000)}
>
Show Toast using params, closes in 3 secs
</IonButton>
<IonButton expand="block" onClick={dismiss}>
Hide Toast
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using the IonToast Component */
import React, { useState } from 'react';
import { IonToast, IonContent, IonButton } from '@ionic/react';

42
core/src/components/toast/usage/react.md
View File

@ -1,4 +1,46 @@
```tsx
/* Using the useIonToast Hook */
import React from 'react';
import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react';
const ToastExample: React.FC = () => {
const [present, dismiss] = useIonToast();
return (
<IonPage>
<IonContent>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'hide', handler: () => dismiss() }],
message: 'toast from hook, click hide to dismiss',
onDidDismiss: () => console.log('dismissed'),
onWillDismiss: () => console.log('will dismiss'),
})
}
>
Show Toast
</IonButton>
<IonButton
expand="block"
onClick={() => present('hello from hook', 3000)}
>
Show Toast using params, closes in 3 secs
</IonButton>
<IonButton expand="block" onClick={dismiss}>
Hide Toast
</IonButton>
</IonContent>
</IonPage>
);
};
```
```tsx
/* Using the IonToast Component */
import React, { useState } from 'react';
import { IonToast, IonContent, IonButton } from '@ionic/react';