Category: React

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Floating Action Button

We can add a floating action button with Ionic React.

For example, we can write:

import React from 'react';
import { IonContent, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import './Tab1.css';
import { add } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonFab vertical="top" horizontal="end" slot="fixed">
        <IonFabButton>
          <IonIcon icon={add} />
        </IonFabButton>
      </IonFab>
    </IonContent>
  );
};

export default Tab1;

to add it.

IonFab is the floating action button component.

IonFabButton lets us add a button inside the IonFab container.

We can add an IonIcon inside the IonFabButton to show an icon.

We can set the slot to 'fixed' to make its position fixed.

vertical sets the vertical position.

horizontal sets the horizontal position.

Grid

We can add a grid layout with Ionic React.

To do this, we can use the IonRow and IonCol components to add rows and columns for the grid:

import React from 'react';
import { IonCol, IonContent, IonGrid, IonRow } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonGrid>
        <IonRow>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
        </IonRow>
        <IonRow>
          <IonCol size="6">ion-col size="6"</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
        </IonRow>
      </IonGrid>
    </IonContent>
  );
};

export default Tab1;

We add the IonRow and IonCol to add the rows and columns respectively.

IonGrid is the container for the rows and columns.

Input

Ionic React comes with a text input component.

For example, we can add one by writing:

import React, { useState } from 'react';
import { IonContent, IonInput, IonItem, IonList } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonInput
            value={text}
            placeholder="Enter Input"
            onIonChange={e => setText(e.detail.value!)} clearInput
          >
          </IonInput>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

The IonInput component is the text input component.

We pass a callback as the value of the onIonChange prop to set the text state to the value of the input.

The value prop has the inputted value.

Also, we can make the input read-only with the readonly prop.

We can also add a number input by setting the type prop to 'number' :

import React, { useState } from 'react';
import { IonContent, IonInput, IonItem, IonList } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [number, setNumber] = useState<number>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonInput
            type="number"
            value={number}
            placeholder="Enter Number"
            onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}
          ></IonInput>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Text Area

We can add a text area with the IonTextarea component.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonItem, IonList, IonTextarea } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonTextarea
            value={text}
            onIonChange={e => setText(e.detail.value!)}>
          </IonTextarea>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add it.

The props are the same as the IonInput component.

We can add a placeholder with the placeholder prop.

And we can disable interaction with the disabled prop.

The text area can also be made read-only with the readonly prop.

Conclusion

We can add a floating action button and text inputs with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Chips

We can add chips to display small pieces of data in our app.

We can use the IonChip component to do this.

For instance, we can write:

import React from 'react';
import { IonChip, IonContent, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip>
        <IonLabel>Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

to add a chip without any styles.

We can add a background color with the color prop:

import React from 'react';
import { IonChip, IonContent, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip color="secondary">
        <IonLabel >Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Also, we can add an icon besides the label by writing:

import React from 'react';
import { IonChip, IonContent, IonIcon, IonLabel } from '@ionic/react';
import './Tab1.css';
import { pin } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip>
        <IonIcon icon={pin} />
        <IonLabel>Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Content

We add our app’s content in an IonContent component.

For example, we can write:

import React from 'react';
import { IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent
      scrollEvents={true}
      onIonScrollStart={() => { }}
      onIonScroll={() => { }}
      onIonScrollEnd={() => { }}>
      <h1>Main Content</h1>
    </IonContent>
  );
};

export default Tab1;

to add some text into our IonContent container.

We can listen to scroll events on it by setting the scrollEvents to true .

The onIonScrollStart prop function is run when we start scrolling.

The onIonScroll prop’s function is run when we scroll.

The onIonScrollEnd prop’s function is run when we’re done scrolling.

Datetime Picker

We can set the date and time in our app with the IonDatetime component.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonDatetime } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');

  return (
    <IonContent>
      <IonDatetime
        displayFormat="MM-DD-YYYY"
        value={selectedDate}
        onIonChange={e => setSelectedDate(e.detail.value!)}
      >
      </IonDatetime>
    </IonContent>
  );
};

export default Tab1;

We display the selectedDate ‘s formatted value with the IonDatetime component.

The displayFormat prop changes the display format.

value sets the datetime value to display.

onIonChange sets the date and time after we picked them when the date and time picker.

Also, we can set some datetime picker options by writing:

import React, { useState } from 'react';
import { IonContent, IonDatetime } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');

  return (
    <IonContent>
      <IonDatetime pickerOptions={{
        buttons: [
          {
            text: 'Save',
            handler: () => console.log('Clicked Save!')
          }, {
            text: 'Log',
            handler: () => {
              console.log('Clicked Log. Do not Dismiss.');
              return false;
            }
          }
        ]
      }}
        placeholder="Custom Options" displayFormat="YYYY"
        min="1981"
        max="2018"
        value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
      </IonDatetime>
    </IonContent>
  );
};

export default Tab1;

We add the pickerOptions prop and set it to an object with the buttons property.

It has an array of options for each button.

The handler property has the function that’s called when we click the button.

Returning false in the handler stops the datetime picker from being dismissed.

Conclusion

We can add chips, content, and a datetime picker with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Button Ripple Effect

We can add a ripple effect to our buttons by using the IonRippleEffect component.

For example, we can write:

import React from 'react';
import { IonContent, IonRippleEffect } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <button className="ion-activatable ripple-parent">
        A button with a bounded ripple effect
        <IonRippleEffect></IonRippleEffect>
      </button>
    </IonContent>
  );
};

export default Tab1;

We add the IonRippleEffect component inside the button to show the ripple effect when we click it.

Card

We can add cards to our Ionic React app to show content.

For example, we can add a card by writing:

import React from 'react';
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
          <IonCardTitle>Card Title</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus congue ante a congue.
      </IonCardContent>
      </IonCard>
    </IonContent>
  );
};

export default Tab1;

IonCard has the card container.

IonCardHeader has the card header.

IonCardSubtitle has the card subtitle.

IonCardTitle has the card title.

IonicCardContent has the card content.

We can also add list items in a card by writing:

import React from 'react';
import { IonCard, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
import { wifi, wine } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonCard>
        <IonItem href="#" className="ion-activated">
          <IonIcon icon={wifi} slot="start" />
          <IonLabel>Card Link Item 1 activated</IonLabel>
        </IonItem>

        <IonItem href="#">
          <IonIcon icon={wine} slot="start" />
          <IonLabel>Card Link Item 2</IonLabel>
        </IonItem>
      </IonCard>
    </IonContent>
  );
};

export default Tab1;

The IonItem component has the list item.

The IonIcon component to add the icon for the list item.

IonLabel has the item label.

Checkbox

We can add a checkbox with the IonCheckbox component.

For example, we can write:

import React, { useState } from 'react';
import { IonCheckbox, IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [checked, setChecked] = useState(false);

  return (
    <IonContent>
      <IonItem>
        <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
        <IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

We listen to changes in the checked state with the onIonPage prop.

e.detail.checked has the checked state of the checkbox.

The checked prop sets the checked state.

IonLabel has the label for the checkbox.

setChecked sets the checked state so that we can display it and use it with the IonCheckbox .

Conclusion

We can add button ripple effects, cards, and checkboxes with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Alerts

We can add alerts to our Ionic React app by writing:

import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowAlert(true)} expand="block">Show Alert</IonButton>
      <IonAlert
        isOpen={showAlert}
        onDidDismiss={() => setShowAlert(false)}
        cssClass='my-custom-class'
        header={'Alert'}
        subHeader={'Subtitle'}
        message={'This is an alert message.'}
        buttons={['OK']}
      />
    </IonContent>
  );
};

export default Tab1;

We add the useState hook to control the showAlert state.

Then we can sue that to control the opening of the alert with the IonButton component.

The isOpen prop controls whether the alert is open or not.

onDidDismiss lets us run something when we dismiss the alert.

cssClass has the CSS class for the alert.

header has the alert header.

subHeader has the alert subheader.

message has an alert message.

buttons have the buttons for the alert.

We can event handlers to the buttons and customize them.

For example, we can write:

import React, { useState } from 'react';
import { IonAlert, IonButton, IonContent } from '[@ionic/react](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Freact "Twitter profile for @ionic/react")';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [showAlert, setShowAlert] = useState(false);

return (
    <IonContent>
      <IonButton onClick={() => setShowAlert(true)} expand="block">Show Alert</IonButton>
      <IonAlert
        isOpen={showAlert}
        onDidDismiss={() => setShowAlert(false)}
        cssClass='my-custom-class'
        header={'Alert'}
        subHeader={'Subtitle'}
        message={'This is an alert message.'}
        buttons={[
          {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary',
            handler: blah => {
              console.log('Confirm Cancel: blah');
            }
          },
          {
            text: 'Okay',
            handler: () => {
              console.log('Confirm Okay');
            }
          }
        ]}
      />
    </IonContent>
  );
};

export default Tab1;

to add objects into the buttons array prop to add the buttons.

handler has the event handler that’s called when we click it.

cssClass has the class name.

text has the button text.

role has the button role.

Badge

We can add a badge with the IonBadge component.

For example, we can write:

import React from 'react';
import { IonBadge, IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonBadge color="primary">11</IonBadge>
    </IonContent>
  );
};

export default Tab1;

to add the badge with the IonBadge component.

color has the color for the badge.

Button

We can add buttons to our Ionic React app with the IonButton component.

For example, we can write:

import React from 'react';
import { IonButton, IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonButton color="dark">Dark</IonButton>
      <IonButton shape="round">Round Button</IonButton>
      <IonButton expand="full">Full Button</IonButton>
    </IonContent>
  );
};

export default Tab1;

to add the buttons.

color has the button background color.

shape has the button shape.

expand set to full means the button spans the whole screen’s width.

Conclusion

We can add alerts, buttons, and badges easily with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Conditional Routing

We can make route components render conditionally.

To do that, we add the render prop to our route:

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Bar from './pages/Bar';
import Foo from './pages/Foo';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

const isAuth = true;

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route
            exact
            path="/random"
            render={props => {
              return isAuth ? <Foo /> : <Bar />;
            }}
          />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="random" href="/random">
            <IonIcon icon={triangle} />
            <IonLabel>Random</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

The render prop takes a function with the props as the parameter and we can return the component we want to render in the function.

Nested Routes

We can define nested routes with Ionic React.

To do that, we write:

App.tsx

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonItem,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import DashboardPage from './pages/DashboardPage';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route path="/dashboard" component={DashboardPage} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

pages/DashboardPage.tsx

import { IonRouterOutlet } from '@ionic/react';
import React from 'react';
import { Route, RouteComponentProps } from 'react-router';
import Bar from './Bar';
import Foo from './Foo';

const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonRouterOutlet>
      <Route exact path={match.url} component={Bar} />
      <Route path={`${match.url}/foo`} component={Foo} />
    </IonRouterOutlet>
  );
};

export default DashboardPage;

pages/Foo.tsx

import React from 'react';
import { IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const Foo: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Foo</IonTitle>
        </IonToolbar>
      </IonHeader>
    </IonPage>
  );
};

export default Foo;

We added the:

<Route path="/dashboard" component={DashboardPage} />

to load the DashboardPage compoennt when we go to /dashboard .

In DashboardPage , we have more routes.

We have:

<Route path={`${match.url}/foo`} component={Foo} />

So we see the Foo component when we go to /dashboard/foo .

Conclusion

We can add various kind of routes with Ionic React.