Master react (#18998)

* chore(): bump to beta 8

* fix(): IonFabButton href fix

* fix(react): support components with href attributes

* fix(): Prep work to break router out

* fix(): breaking react-router and react-core into own packages

* chore(): moving view stuff out of react-core

* chore(): dev build 8-1

* chore(): update to react beta 8

* chore(): fixes to deps

* fix(): removing IonAnchor in favor of IonRouterLink

* chore(): beta 9 release

* refactor(react): treeshake, minify, api

* wip

* fix(): react dev builds

* fix(): fixes to get app builds working again

* fix(): removing tgz file

* feat(): adding platform helper methods

* fix(): don't map attributes to props

* chore(): add test app

* feat(): copy css folder from core

* chore(): move rollup node resolve to devDependencies

* fix(): expose setupConfig()

* perf(): improve treeshaking

* fix(): removing crypto from generateUniqueId

* fix(): adding missing rollup dp

* fix(): test cleanup and fixes to make tests pass

* chore(): moving react to packages folder

* fix(): fixing react build due to move to packages

* feat(): adding missing IonInfiniteScrollContent component

* chore(): add automated testing using cypress

* fix(): adding option onDidDismiss to controller components

* 0.0.10 react

* wip

* fix(): removing deprecated React calls

* fix(): exporting setupConfig from core

* chore(): bump to 4.8.0-rc.0

* chore(): updating test-app deps and fixing test

* chore(): updates to react readme

.gitignore

@@ -57,6 +57,7 @@ prerender-static.html
 
 # stencil
 angular/css/
+packages/react/css/
 core/css/
 core/hydrate/
 core/loader/

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

@@ -128,7 +128,7 @@ async function presentActionSheet() {
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

core/src/components/alert/readme.md

@@ -526,7 +526,7 @@ async function presentAlertCheckbox() {
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

core/src/components/avatar/readme.md

@@ -39,7 +39,7 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 import React from 'react'
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const AvatarExample: React.FunctionComponent = () => (
+export const AvatarExample: React.FC = () => (
   <IonContent>
     <IonAvatar>
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

core/src/components/avatar/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react'
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const AvatarExample: React.FunctionComponent = () => (
+export const AvatarExample: React.FC = () => (
   <IonContent>
     <IonAvatar>
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

core/src/components/back-button/readme.md

@@ -121,7 +121,7 @@ To change what is displayed in the back button, use the `text` and `icon` proper
 import React from 'react';
 import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-export const BackButtonExample: React.FunctionComponent = () => (
+export const BackButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>

core/src/components/back-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-export const BackButtonExample: React.FunctionComponent = () => (
+export const BackButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>

core/src/components/backdrop/readme.md

@@ -80,7 +80,7 @@ backdrop.stopPropagation = false;
 import React from 'react';
 import { IonBackdrop, IonContent } from '@ionic/react';
 
-export const BackdropExample: React.FunctionComponent = () => (
+export const BackdropExample: React.FC = () => (
   <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />

core/src/components/backdrop/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBackdrop, IonContent } from '@ionic/react';
 
-export const BackdropExample: React.FunctionComponent = () => (
+export const BackdropExample: React.FC = () => (
   <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />

core/src/components/badge/readme.md

@@ -40,7 +40,7 @@ Badges are inline block elements that usually appear near another element. Typic
 import React from 'react';
 import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const BadgeExample: React.FunctionComponent = () => (
+export const BadgeExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonBadge>99</IonBadge>

core/src/components/badge/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const BadgeExample: React.FunctionComponent = () => (
+export const BadgeExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonBadge>99</IonBadge>

core/src/components/button/readme.md

@@ -98,7 +98,7 @@ import React from 'react';
 
 import { IonButton, IonIcon, IonContent } from '@ionic/react';
 
-export const ButtonExample: React.FunctionComponent = () => (
+export const ButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonButton>Default</IonButton>

core/src/components/button/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonButton, IonIcon, IonContent } from '@ionic/react';
 
-export const ButtonExample: React.FunctionComponent = () => (
+export const ButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonButton>Default</IonButton>

core/src/components/buttons/readme.md

@@ -118,7 +118,7 @@ import {
   IonContent
 } from '@ionic/react';
 
-export const ButtonsExample: React.FunctionComponent = () => (
+export const ButtonsExample: React.FC = () => (
   <IonContent>
     <IonToolbar>
       <IonButtons slot="start">

core/src/components/buttons/usage/react.md

@@ -11,7 +11,7 @@ import {
   IonContent
 } from '@ionic/react';
 
-export const ButtonsExample: React.FunctionComponent = () => (
+export const ButtonsExample: React.FC = () => (
   <IonContent>
     <IonToolbar>
       <IonButtons slot="start">

core/src/components/card/readme.md

@@ -69,7 +69,7 @@ sub-components to reflect this. Please see `ion-card-content`,
 import React from 'react';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
 
-export const CardExample: React.FunctionComponent = () => (
+export const CardExample: React.FC = () => (
   <IonContent>
     <IonCard>
       <IonCardHeader>

core/src/components/card/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
 
-export const CardExample: React.FunctionComponent = () => (
+export const CardExample: React.FC = () => (
   <IonContent>
     <IonCard>
       <IonCardHeader>

core/src/components/checkbox/readme.md

@@ -107,7 +107,7 @@ const form = [
   { val: 'Mushroom', isChecked: false }
 ];
 
-export const CheckboxExample: React.FunctionComponent = () => (
+export const CheckboxExample: React.FC = () => (
   <IonContent>
     {/*-- Default Checkbox --*/}
     <IonCheckbox />

core/src/components/checkbox/usage/react.md

@@ -8,7 +8,7 @@ const form = [
   { val: 'Mushroom', isChecked: false }
 ];
 
-export const CheckboxExample: React.FunctionComponent = () => (
+export const CheckboxExample: React.FC = () => (
   <IonContent>
     {/*-- Default Checkbox --*/}
     <IonCheckbox />

core/src/components/chip/readme.md

@@ -59,7 +59,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 import React from 'react';
 import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';
 
-export const ChipExample: React.FunctionComponent = () => (
+export const ChipExample: React.FC = () => (
   <IonContent>
     <IonChip>
       <IonLabel>Default</IonLabel>

core/src/components/chip/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';
 
-export const ChipExample: React.FunctionComponent = () => (
+export const ChipExample: React.FC = () => (
   <IonContent>
     <IonChip>
       <IonLabel>Default</IonLabel>

core/src/components/content/readme.md

@@ -44,7 +44,7 @@ content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 import React from 'react';
 import { IonContent } from '@ionic/react';
 
-const ContentExample: React.FunctionComponent = () => (
+const ContentExample: React.FC = () => (
   <IonContent
     scrollEvents={true}
     onIonScrollStart={() => {}}

core/src/components/content/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent } from '@ionic/react';
 
-const ContentExample: React.FunctionComponent = () => (
+const ContentExample: React.FC = () => (
   <IonContent
     scrollEvents={true}
     onIonScrollStart={() => {}}

core/src/components/datetime/readme.md

@@ -416,7 +416,7 @@ const customDayShortNames = [
   'l\u00f8r'
 ];
 
-export const DateTimeExample: React.FunctionComponent = () => (
+export const DateTimeExample: React.FC = () => (
   <IonContent>
     <IonItem>
       <IonLabel>MMMM</IonLabel>

core/src/components/datetime/usage/react.md

@@ -14,7 +14,7 @@ const customDayShortNames = [
   'l\u00f8r'
 ];
 
-export const DateTimeExample: React.FunctionComponent = () => (
+export const DateTimeExample: React.FC = () => (
   <IonContent>
     <IonItem>
       <IonLabel>MMMM</IonLabel>

core/src/components/fab-button/readme.md

@@ -42,7 +42,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 import React from 'react';
 import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 
-export const FabButtonExample: React.FunctionComponent = () => (
+export const FabButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
     <IonFab>

core/src/components/fab-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 
-export const FabButtonExample: React.FunctionComponent = () => (
+export const FabButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
     <IonFab>

core/src/components/fab-list/readme.md

@@ -33,7 +33,7 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
 import React from 'react';
 import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
 
-export const FabListExample: React.FunctionComponent = () => (
+export const FabListExample: React.FC = () => (
   <IonContent>
     <IonFab vertical="bottom" horizontal="end">
       <IonFabButton>

core/src/components/fab-list/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
 
-export const FabListExample: React.FunctionComponent = () => (
+export const FabListExample: React.FC = () => (
   <IonContent>
     <IonFab vertical="bottom" horizontal="end">
       <IonFabButton>

core/src/components/fab/readme.md

@@ -98,7 +98,7 @@ Fabs are container elements that contain one or more fab buttons. They should be
 import React from 'react';
 import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
 
-export const FabExample: React.FunctionComponent = () => (
+export const FabExample: React.FC = () => (
   <IonContent>
     {/*-- fab placed to the top end --*/}
     <IonFab vertical="top" horizontal="end" slot="fixed">

core/src/components/fab/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
 
-export const FabExample: React.FunctionComponent = () => (
+export const FabExample: React.FC = () => (
   <IonContent>
     {/*-- fab placed to the top end --*/}
     <IonFab vertical="top" horizontal="end" slot="fixed">

core/src/components/footer/readme.md

@@ -27,7 +27,7 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c
 import React from 'react';
 import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
 
-export const FooterExample: React.FunctionComponent = () => (
+export const FooterExample: React.FC = () => (
   <>
     <IonContent />
 

core/src/components/footer/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
 
-export const FooterExample: React.FunctionComponent = () => (
+export const FooterExample: React.FC = () => (
   <>
     <IonContent />
 

core/src/components/grid/readme.md

@@ -201,7 +201,7 @@ See [Grid Layout](/docs/layout/grid) for more information.
 import React from 'react';
 import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
 
-export const GridExample: React.FunctionComponent = () => (
+export const GridExample: React.FC = () => (
   <IonContent>
     <IonGrid>
       <IonRow>

core/src/components/grid/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react';
 
-export const GridExample: React.FunctionComponent = () => (
+export const GridExample: React.FC = () => (
   <IonContent>
     <IonGrid>
       <IonRow>

core/src/components/header/readme.md

@@ -36,7 +36,7 @@ It's important to note that ion-header needs to be the one of the three root ele
 import React from 'react';
 import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
 
-export const HeaderExample: React.FunctionComponent = () => (
+export const HeaderExample: React.FC = () => (
   <>
     <IonHeader>
       <IonToolbar>

core/src/components/header/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
 
-export const HeaderExample: React.FunctionComponent = () => (
+export const HeaderExample: React.FC = () => (
   <>
     <IonHeader>
       <IonToolbar>

core/src/components/icon/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonIcon } from '@ionic/react';
 
-const Example: React.FunctionComponent<{}> = () => (
+const Example: React.FC<{}> = () => (
   <>
     {/*-- automatically uses the correct "star" icon depending on the mode --*/}
     <IonIcon name="star" />

core/src/components/img/readme.md

@@ -34,7 +34,7 @@ type Item = {
 };
 const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
 
-export const ImgExample: React.FunctionComponent = () => (
+export const ImgExample: React.FC = () => (
   <IonContent>
     <IonList>
       {items.map((image, i) => (

core/src/components/img/usage/react.md

@@ -8,7 +8,7 @@ type Item = {
 };
 const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
 
-export const ImgExample: React.FunctionComponent = () => (
+export const ImgExample: React.FC = () => (
   <IonContent>
     <IonList>
       {items.map((image, i) => (

core/src/components/input/readme.md

@@ -110,7 +110,7 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 import React from 'react';
 import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const InputExample: React.FunctionComponent = () => (
+export const InputExample: React.FC = () => (
   <IonContent>
     {/*-- Default Input --*/}
     <IonInput></IonInput>

core/src/components/input/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const InputExample: React.FunctionComponent = () => (
+export const InputExample: React.FC = () => (
   <IonContent>
     {/*-- Default Input --*/}
     <IonInput></IonInput>

core/src/components/item-divider/readme.md

@@ -57,7 +57,7 @@ Item Dividers are block elements that can be used to separate items in a list. T
 import React from 'react';
 import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';
 
-export const ItemDividerExample: React.FunctionComponent = () => (
+export const ItemDividerExample: React.FC = () => (
   <IonContent>
     <IonItemDivider>
       <IonLabel>

core/src/components/item-divider/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';
 
-export const ItemDividerExample: React.FunctionComponent = () => (
+export const ItemDividerExample: React.FC = () => (
   <IonContent>
     <IonItemDivider>
       <IonLabel>

core/src/components/item-group/readme.md

@@ -124,7 +124,7 @@ import React from 'react';
 
 import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
 
-const Example: React.FunctionComponent<{}> = () => (
+const Example: React.FC<{}> = () => (
   <>
     <IonItemGroup>
       <IonItemDivider>

core/src/components/item-group/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
 
-const Example: React.FunctionComponent<{}> = () => (
+const Example: React.FC<{}> = () => (
   <>
     <IonItemGroup>
       <IonItemDivider>

core/src/components/item-sliding/readme.md

@@ -331,7 +331,7 @@ Options can be expanded to take up the full width of the item if you swipe past
 import React from 'react';
 import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
 
-export const ItemSlidingExample: React.FunctionComponent = () => (
+export const ItemSlidingExample: React.FC = () => (
 <IonList>
   {/* Sliding item with text options on both sides */}
   <IonItemSliding>

core/src/components/item-sliding/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
 
-export const ItemSlidingExample: React.FunctionComponent = () => (
+export const ItemSlidingExample: React.FC = () => (
 <IonList>
   {/* Sliding item with text options on both sides */}
   <IonItemSliding>

core/src/components/item/readme.md

@@ -714,7 +714,7 @@ import React from 'react';
 
 import { IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonSelect, IonSelectOption, IonDatetime, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
 
-const Example: React.FunctionComponent<{}> = () => (
+const Example: React.FC<{}> = () => (
   <>
     {/*-- Default Item --*/}
     <IonItem>

core/src/components/item/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonSelect, IonSelectOption, IonDatetime, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
 
-const Example: React.FunctionComponent<{}> = () => (
+const Example: React.FC<{}> = () => (
   <>
     {/*-- Default Item --*/}
     <IonItem>

core/src/components/label/readme.md

@@ -72,7 +72,7 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
 import React from 'react';
 import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
 
-export const LabelExample: React.FunctionComponent = () => (
+export const LabelExample: React.FC = () => (
   <IonContent>
     {/*-- Default Label --*/}
     <IonLabel>Label</IonLabel><br />

core/src/components/label/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
 
-export const LabelExample: React.FunctionComponent = () => (
+export const LabelExample: React.FC = () => (
   <IonContent>
     {/*-- Default Label --*/}
     <IonLabel>Label</IonLabel><br />

core/src/components/list-header/readme.md

@@ -31,7 +31,7 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the
 import React from 'react';
 import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
 
-export const ListHeaderExample: React.FunctionComponent = () => (
+export const ListHeaderExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonListHeader>

core/src/components/list-header/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
 
-export const ListHeaderExample: React.FunctionComponent = () => (
+export const ListHeaderExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonListHeader>

core/src/components/list/readme.md

@@ -147,7 +147,7 @@ Lists support several interactions including swiping items to reveal options, dr
 import React from 'react';
 import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';
 
-export const ListExample: React.FunctionComponent = () => (
+export const ListExample: React.FC = () => (
   <IonContent>
     {/*-- List of Text Items --*/}
     <IonList>

core/src/components/list/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';
 
-export const ListExample: React.FunctionComponent = () => (
+export const ListExample: React.FC = () => (
   <IonContent>
     {/*-- List of Text Items --*/}
     <IonList>

core/src/components/loading/readme.md

@@ -97,7 +97,7 @@ async function presentLoadingWithOptions() {
 import React, { useState } from 'react';
 import { IonLoading, IonButton, IonContent } from '@ionic/react';
 
-export const LoadingExample: React.FunctionComponent = () => {
+export const LoadingExample: React.FC = () => {
   const [showLoading, setShowLoading] = useState(true);
 
   setTimeout(() => {

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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonLoading, IonButton, IonContent } from '@ionic/react';
 
-export const LoadingExample: React.FunctionComponent = () => {
+export const LoadingExample: React.FC = () => {
   const [showLoading, setShowLoading] = useState(true);
 
   setTimeout(() => {

core/src/components/menu/readme.md

@@ -209,7 +209,7 @@ function openCustom() {
 import React from 'react';
 import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
 
-export const MenuExample: React.FunctionComponent = () => (
+export const MenuExample: React.FC = () => (
   <>
     <IonMenu side="start" menuId="first">
       <IonHeader>

core/src/components/menu/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
 
-export const MenuExample: React.FunctionComponent = () => (
+export const MenuExample: React.FC = () => (
   <>
     <IonMenu side="start" menuId="first">
       <IonHeader>

core/src/components/modal/readme.md

@@ -251,7 +251,7 @@ console.log(data);
 import React, { useState } from 'react';
 import { IonModal, IonButton, IonContent } from '@ionic/react';
 
-export const ModalExample: React.FunctionComponent = () => {
+export const ModalExample: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
 
   return (

core/src/components/modal/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonModal, IonButton, IonContent } from '@ionic/react';
 
-export const ModalExample: React.FunctionComponent = () => {
+export const ModalExample: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
 
   return (

core/src/components/note/readme.md

@@ -42,7 +42,7 @@ Notes are text elements generally used as subtitles that provide more informatio
 import React from 'react';
 import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const NoteExample: React.FunctionComponent = () => (
+export const NoteExample: React.FC = () => (
   <IonContent>
     {/*-- Default Note --*/}
     <IonNote>Default Note</IonNote><br />

core/src/components/note/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const NoteExample: React.FunctionComponent = () => (
+export const NoteExample: React.FC = () => (
   <IonContent>
     {/*-- Default Note --*/}
     <IonNote>Default Note</IonNote><br />

core/src/components/popover/readme.md

@@ -65,7 +65,7 @@ async function presentPopover(ev) {
 import React, { useState } from 'react';
 import { IonPopover, IonButton } from '@ionic/react';
 
-export const PopoverExample: React.FunctionComponent = () => {
+export const PopoverExample: React.FC = () => {
   const [showPopover, setShowPopover] = useState(false);
 
   return (

core/src/components/popover/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonPopover, IonButton } from '@ionic/react';
 
-export const PopoverExample: React.FunctionComponent = () => {
+export const PopoverExample: React.FC = () => {
   const [showPopover, setShowPopover] = useState(false);
 
   return (

core/src/components/progress-bar/readme.md

@@ -8,7 +8,7 @@ ion-progress-bar is a horizontal progress bar to visualize the progression of an
 
 If the percentage of an operation is known, you should use the determinate type. This is the default type and the progress is represented by the `value` property.
 
-A buffer shows circles as animation to indicate some activity. If the `buffer` property is smaller than 1 you can show the addditional buffering progress. 
+A buffer shows circles as animation to indicate some activity. If the `buffer` property is smaller than 1 you can show the addditional buffering progress.
 
 ### Indeterminate
 
@@ -47,7 +47,7 @@ If you add `reversed="true"`, you receive a query which is used to indicate pre-
 import React from 'react';
 import { IonProgressBar, IonContent } from '@ionic/react';
 
-export const ProgressbarExample: React.FunctionComponent = () => (
+export const ProgressbarExample: React.FC = () => (
   <IonContent>
     {/*-- Default Progressbar --*/}
     <IonProgressBar></IonProgressBar><br />

core/src/components/progress-bar/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonProgressBar, IonContent } from '@ionic/react';
 
-export const ProgressbarExample: React.FunctionComponent = () => (
+export const ProgressbarExample: React.FC = () => (
   <IonContent>
     {/*-- Default Progressbar --*/}
     <IonProgressBar></IonProgressBar><br />

core/src/components/radio-group/readme.md

@@ -57,7 +57,7 @@ radio button within the same group.
 import React from 'react';
 import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
 
-export const RadioGroupExample: React.FunctionComponent = () => (
+export const RadioGroupExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonRadioGroup>

core/src/components/radio-group/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
 
-export const RadioGroupExample: React.FunctionComponent = () => (
+export const RadioGroupExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonRadioGroup>

core/src/components/radio/readme.md

@@ -46,7 +46,7 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
 import React from 'react';
 import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';
 
-export const RadioExample: React.FunctionComponent = () => (
+export const RadioExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonRadioGroup>

core/src/components/radio/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';
 
-export const RadioExample: React.FunctionComponent = () => (
+export const RadioExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonRadioGroup>

core/src/components/range/readme.md

@@ -97,7 +97,7 @@ left or right of the range.
 import React from 'react';
 import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';
 
-export const RangeExample: React.FunctionComponent = () => (
+export const RangeExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonItem>

core/src/components/range/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';
 
-export const RangeExample: React.FunctionComponent = () => (
+export const RangeExample: React.FC = () => (
   <IonContent>
     <IonList>
       <IonItem>

core/src/components/refresher/readme.md

@@ -115,7 +115,7 @@ function doRefresh(event: CustomEvent<RefresherEventDetail>) {
   }, 2000);
 }
 
-export const RefresherExample: React.FunctionComponent = () => (
+export const RefresherExample: React.FC = () => (
   <IonContent>
     {/*-- Default Refresher --*/}
     <IonContent>

core/src/components/refresher/usage/react.md

@@ -12,7 +12,7 @@ function doRefresh(event: CustomEvent<RefresherEventDetail>) {
   }, 2000);
 }
 
-export const RefresherExample: React.FunctionComponent = () => (
+export const RefresherExample: React.FC = () => (
   <IonContent>
     {/*-- Default Refresher --*/}
     <IonContent>

core/src/components/reorder-group/readme.md

@@ -279,7 +279,7 @@ function doReorder(event: CustomEvent<ItemReorderEventDetail>) {
   event.detail.complete();
 }
 
-export const ReorderGroupExample: React.FunctionComponent = () => (
+export const ReorderGroupExample: React.FC = () => (
   <IonContent>
     {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
     <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>

core/src/components/reorder-group/usage/react.md

@@ -14,7 +14,7 @@ function doReorder(event: CustomEvent<ItemReorderEventDetail>) {
   event.detail.complete();
 }
 
-export const ReorderGroupExample: React.FunctionComponent = () => (
+export const ReorderGroupExample: React.FC = () => (
   <IonContent>
     {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
     <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>

core/src/components/reorder/readme.md

@@ -87,7 +87,7 @@ Reorder is a component that allows an item in a group of items to be dragged to
 import React from 'react';
 import { IonIcon, IonItem, IonLabel, IonReorder, IonContent } from '@ionic/react';
 
-export const ReorderExample: React.FunctionComponent = () => (
+export const ReorderExample: React.FC = () => (
   <IonContent>
     {/*-- Default reorder icon, end aligned items --*/}
     <IonItem>

core/src/components/reorder/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonIcon, IonItem, IonLabel, IonReorder, IonContent } from '@ionic/react';
 
-export const ReorderExample: React.FunctionComponent = () => (
+export const ReorderExample: React.FC = () => (
   <IonContent>
     {/*-- Default reorder icon, end aligned items --*/}
     <IonItem>

core/src/components/searchbar/readme.md

@@ -115,7 +115,7 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 import React from 'react';
 import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react';
 
-export const SearchbarExample: React.FunctionComponent = () => (
+export const SearchbarExample: React.FC = () => (
   <IonContent>
     {/*-- Default Searchbar --*/}
     <IonSearchbar></IonSearchbar>

core/src/components/searchbar/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react';
 
-export const SearchbarExample: React.FunctionComponent = () => (
+export const SearchbarExample: React.FC = () => (
   <IonContent>
     {/*-- Default Searchbar --*/}
     <IonSearchbar></IonSearchbar>

core/src/components/segment-button/readme.md

@@ -321,7 +321,7 @@ for (let i = 0; i < segmentButtons.length; i++) {
 import React from 'react';
 import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonContent } from '@ionic/react';
 
-export const SegmentButtonExample: React.FunctionComponent = () => (
+export const SegmentButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Segment buttons with text and click listeners --*/}
     <IonSegment>

core/src/components/segment-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonContent } from '@ionic/react';
 
-export const SegmentButtonExample: React.FunctionComponent = () => (
+export const SegmentButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Segment buttons with text and click listeners --*/}
     <IonSegment>

core/src/components/segment/readme.md

@@ -231,7 +231,7 @@ for (let i = 0; i < segments.length; i++) {
 import React from 'react';
 import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
 
-export const SegmentExample: React.FunctionComponent = () => (
+export const SegmentExample: React.FC = () => (
   <IonContent>
     {/*-- Default Segment --*/}
     <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>

core/src/components/segment/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
 
-export const SegmentExample: React.FunctionComponent = () => (
+export const SegmentExample: React.FC = () => (
   <IonContent>
     {/*-- Default Segment --*/}
     <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>

core/src/components/select/readme.md

@@ -478,7 +478,7 @@ const compareWith = (o1: any, o2: any) => {
   return o1 && o2 ? o1.id === o2.id : o1 === o2;
 };
 
-export const SelectExample: React.FunctionComponent = () => (
+export const SelectExample: React.FC = () => (
   <IonContent>
     ## Single Selection
     <IonList>

core/src/components/select/usage/react.md

@@ -50,7 +50,7 @@ const compareWith = (o1: any, o2: any) => {
   return o1 && o2 ? o1.id === o2.id : o1 === o2;
 };
 
-export const SelectExample: React.FunctionComponent = () => (
+export const SelectExample: React.FC = () => (
   <IonContent>
     ## Single Selection
     <IonList>

core/src/components/skeleton-text/readme.md

@@ -338,7 +338,7 @@ import {
 } from '@ionic/react';
 import './SkeletonTextExample.css';
 
-export const SkeletonTextExample: React.FunctionComponent = () => {
+export const SkeletonTextExample: React.FC = () => {
   const [data, setData] = useState();
 
   setTimeout(() => {

core/src/components/skeleton-text/usage/react.md

@@ -13,7 +13,7 @@ import {
 } from '@ionic/react';
 import './SkeletonTextExample.css';
 
-export const SkeletonTextExample: React.FunctionComponent = () => {
+export const SkeletonTextExample: React.FC = () => {
   const [data, setData] = useState();
 
   setTimeout(() => {

core/src/components/slides/readme.md

@@ -59,24 +59,24 @@ const slidesOpts = {
         const slideSize = slidesSizesGrid[i];
         const slideOffset = $slideEl[0].swiperSlideOffset;
         const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
-  
+
          let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
         let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
         // var rotateZ = 0
         let translateZ = -translate * Math.abs(offsetMultiplier);
-  
+
          let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
         let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
-  
+
          // Fix for ultra small values
         if (Math.abs(translateX) < 0.001) translateX = 0;
         if (Math.abs(translateY) < 0.001) translateY = 0;
         if (Math.abs(translateZ) < 0.001) translateZ = 0;
         if (Math.abs(rotateY) < 0.001) rotateY = 0;
         if (Math.abs(rotateX) < 0.001) rotateX = 0;
-  
+
          const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-  
+
          $slideEl.transform(slideTransform);
         $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
         if (params.slideShadows) {
@@ -95,7 +95,7 @@ const slidesOpts = {
           if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
         }
       }
-  
+
        // Set correct perspective for IE10
       if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
         const ws = $wrapperEl[0].style;
@@ -129,7 +129,7 @@ const slidesOpts = {
       const swiper = this;
       swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
       swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
-      
+
       const overwriteParams = {
         slidesPerView: 1,
         slidesPerColumn: 1,
@@ -140,7 +140,7 @@ const slidesOpts = {
         centeredSlides: false,
         virtualTranslate: true,
       };
-      
+
       this.params = Object.assign(this.params, overwriteParams);
       this.originalParams = Object.assign(this.originalParams, overwriteParams);
     },
@@ -170,7 +170,7 @@ const slidesOpts = {
           }
         }
       }
-      
+
       for (let i = 0; i < slides.length; i += 1) {
         const $slideEl = slides.eq(i);
         let slideIndex = i;
@@ -203,12 +203,12 @@ const slidesOpts = {
         if (rtl) {
           tx = -tx;
         }
-  
+
          if (!isHorizontal) {
           ty = tx;
           tx = 0;
         }
-  
+
          const transform$$1 = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
         if (progress <= 1 && progress > -1) {
           wrapperRotate = (slideIndex * 90) + (progress * 90);
@@ -237,7 +237,7 @@ const slidesOpts = {
         '-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,
         'transform-origin': `50% 50% -${swiperSize / 2}px`,
       });
-  
+
        if (params.shadow) {
         if (isHorizontal) {
           $cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
@@ -334,7 +334,7 @@ const slidesOpts = {
       }
     },
   }
-}    
+}
 ```
 
 #### Flip
@@ -380,9 +380,9 @@ const slideOpts = {
         } else if (rtl) {
           rotateY = -rotateY;
         }
-  
+
          $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
-  
+
          if (swiper.params.flipEffect.slideShadows) {
           // Set shadows
           let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
@@ -415,7 +415,7 @@ const slideOpts = {
         slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {
           if (eventTriggered) return;
           if (!swiper || swiper.destroyed) return;
-  
+
           eventTriggered = true;
           swiper.animating = false;
           const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
@@ -508,7 +508,7 @@ const slideOpts = {
   speed: 400
 };
 
-export const SlidesExample: React.FunctionComponent = () => (
+export const SlidesExample: React.FC = () => (
   <IonContent>
     <IonSlides pager={true} options={slideOpts}>
       <IonSlide>

core/src/components/slides/usage/react.md

@@ -8,7 +8,7 @@ const slideOpts = {
   speed: 400
 };
 
-export const SlidesExample: React.FunctionComponent = () => (
+export const SlidesExample: React.FC = () => (
   <IonContent>
     <IonSlides pager={true} options={slideOpts}>
       <IonSlide>

core/src/components/spinner/readme.md

@@ -46,7 +46,7 @@ The default spinner to use is based on the platform. The default spinner for `io
 import React from 'react';
 import { IonSpinner, IonContent } from '@ionic/react';
 
-export const SpinnerExample: React.FunctionComponent = () => (
+export const SpinnerExample: React.FC = () => (
   <IonContent>
     {/*-- Default Spinner --*/}
     <IonSpinner />

core/src/components/spinner/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonSpinner, IonContent } from '@ionic/react';
 
-export const SpinnerExample: React.FunctionComponent = () => (
+export const SpinnerExample: React.FC = () => (
   <IonContent>
     {/*-- Default Spinner --*/}
     <IonSpinner />

core/src/components/tab-bar/readme.md

@@ -59,7 +59,7 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
 import React from 'react';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
 
-export const TabBarExample: React.FunctionComponent = () => (
+export const TabBarExample: React.FC = () => (
   <IonContent>
     <IonTabs>
       {/*-- Tab bar --*/}

core/src/components/tab-bar/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonContent } from '@ionic/react';
 
-export const TabBarExample: React.FunctionComponent = () => (
+export const TabBarExample: React.FC = () => (
   <IonContent>
     <IonTabs>
       {/*-- Tab bar --*/}

core/src/components/tab-button/readme.md

@@ -94,7 +94,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 import React from 'react';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
 
-export const TabButtonExample: React.FunctionComponent = () => (
+export const TabButtonExample: React.FC = () => (
   <IonContent>
     <IonTabs>
       <IonTabBar slot="bottom">

core/src/components/tab-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
 
-export const TabButtonExample: React.FunctionComponent = () => (
+export const TabButtonExample: React.FC = () => (
   <IonContent>
     <IonTabs>
       <IonTabBar slot="bottom">