Mobile Development with Ionic and React — Ripple Effect, Cards, and Checkboxes

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.