Files

@ionic/react (beta)

These are React specific building blocks on top of @ionic/core components/services.

To get started simply install @ionic/react and @ionic/core with npm into your project. We recommend you use create-react-app to get started and to use TypeScript for the best experience.

We are currently working on providing more detailed documentation on usage but please refer to our example application for now. If you would like to see an example app of the implementation please go to our react conference app

Current Status of Components

Below is a list of components and their current status. Please know that these will not be final implementations but this list can be used to understand current progress.

Component
IonActionSheet
IonAlert
IonAnchor
IonApp
IonAvatar
IonBackButton
IonBackdrop
IonBadge
IonButton
IonButtons
IonCard
IonCardContent
IonCardHeader
IonCardSubtitle
IonCardTitle
IonCheckbox
IonChip
IonCol
IonContent
IonDatetime
IonFab
IonFabButton
IonFabList
IonFooter
IonGrid
IonHeader
IonIcon
IonImg
IonInfiniteScroll
IonInput
IonItem
IonItemDivider
IonItemGroup
IonItemOption
IonItemOptions
IonItemSliding
IonLabel
IonList
IonListHeader
IonLoading
IonMenu
IonMenuButton
IonMenuToggle
IonModal
IonNote
IonPicker
IonPickerColumn
IonPopover
IonProgressBar
IonRadio
IonRadioGroup
IonRange
IonRefresher
IonRefresherContent
IonReorder
IonReorderGroup
IonRippleEffect
IonRouterOutlet
IonRow
IonSearchbar
IonSegment
IonSegmentButton
IonSelect
IonSelectOption
IonSelectPopover
IonSkeletonText
IonSlide
IonSlides
IonSpinner
IonSplitPane
IonTab
IonTabBar
IonTabButton
IonTabs
IonText
IonTextarea
IonThumbnail
IonTitle
IonToast
IonToggle
IonToolbar
IonVirtualScroll

Publishing a Native Application

You can now make use of all of the ionic components in your React application. If you want to publish your app to the App Store or Google Play you will need to use the ionic cli to execute Capacitor commands to do so.

More information on this can be found here. https://beta.ionicframework.com/docs/cli If you want to learn more about Capacitor our dedicated site can be found here. https://capacitor.ionicframework.com/

The commands that you will need to execute are below.

ionic capacitor add
ionic capacitor copy
ionic capacitor run

License