Mobile Development with Ionic and React — Alerts, Badges, and Buttons

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.