Package Exports
- @ionic/react
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ionic/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@ionic/react (alpha)
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 a 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'));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 | 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 |
✅ | 🔲 |
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