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
import React from 'react';
import ReactDOM from 'react-dom';
import { registerIonic } from '@ionic/react';
import App from './App';
registerIonic();
ReactDOM.render(<App />, document.getElementById('root'));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 | Development Status | Tests |
|---|---|---|
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 |
✅ | 🔲 |
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