Permalink
Branch: master
Find file Copy path
3aca00e Jan 30, 2019
3 contributors

Users who have contributed to this file

@jthoms1 @lpmi-13 @brandyscarney
141 lines (120 sloc) 7.16 KB

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

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

Related

License