javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +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

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';