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.

Loading Spinner

We can add a loading spinner with the IonSpinner component.

For instance, we can write:

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

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

export default Tab1;

We can set the name property to change the loading spinner type:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonSpinner name="lines-small" />
    </IonContent>
  );
};

export default Tab1;

Radio Button

We can add a group of radio buttons with the IonRadioGroup and the IonRadio components.

For example, we can write:

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

const Tab1: React.FC = () => {
  const [selected, setSelected] = useState<string>('biff');
  return (
    <IonContent>
      <IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>
        <IonListHeader>
          <IonLabel>Name</IonLabel>
        </IonListHeader>
        <IonItem>
          <IonLabel>Biff</IonLabel>
          <IonRadio slot="start" value="biff" />
        </IonItem>
        <IonItem>
          <IonLabel>Griff</IonLabel>
          <IonRadio slot="start" value="griff" />
        </IonItem>
        <IonItem>
          <IonLabel>Cliff</IonLabel>
          <IonRadio slot="start" value="cliff" />
        </IonItem>
      </IonRadioGroup>
    </IonContent>
  );
};

export default Tab1;

to add a group of radio buttons.

The IonRadioGroup component surrounds the group of radio buttons.

IonRadio lets us add radio buttons.

value has the radio button values.

onIonChange prop has a function that gets the selected radio button and calls setSelected to set the selected radio button.

Range Input

We can add a range input with the IonRange component.

For instance, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonRange min={-200} max={200} color="secondary">
            <IonLabel slot="start">-200</IonLabel>
            <IonLabel slot="end">200</IonLabel>
          </IonRange>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add the IonRange component to add the range input.

We can replace the labels with icons by using the IonIcon component:

import React from 'react';
import { IonContent, IonIcon, IonItem, IonList, IonRange } from '@ionic/react';
import './Tab1.css';
import { sunny } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonRange min={-200} max={200} color="secondary">
            <IonIcon size="small" slot="start" icon={sunny} />
            <IonIcon slot="end" icon={sunny} />
          </IonRange>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We can add the snaps and steps props to snap to values.

For example, we can write:

import React from 'react';
import { IonContent, IonIcon, IonItem, IonList, IonRange } from '@ionic/react';
import './Tab1.css';
import { sunny } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonRange min={-200} max={200} step={20} snaps color="secondary">
            <IonIcon size="small" slot="start" icon={sunny} />
            <IonIcon slot="end" icon={sunny} />
          </IonRange>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Conclusion

We can add a loading spinner, radio buttons, and a range input 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.

Popovers

We can add popovers with the IonPopover component.

For example, we can write:

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

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

  return (
    <IonContent>
      <IonPopover
        isOpen={showPopover}
        cssClass='my-custom-class'
        onDidDismiss={e => setShowPopover(false)}
      >
        <IonContent>
          <p>This is popover content</p>
        </IonContent>
      </IonPopover>
      <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
    </IonContent>
  );
};

export default Tab1;

We add an IonButton to add the Show Popover button.

Then we add the IonPopover component to add the popover.

The isOpen prop controls whether it’s opened or not.

cssClass sets the class for the component.

onDidDismiss is called when we dismiss the popover.

The showPopover state controls the popover.

Loading Indicator

We can add a loading indicator with the IonLoading component.

For example, we can write:

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

const Tab1: React.FC = () => {
  const [showLoading, setShowLoading] = useState(true);

  setTimeout(() => {
    setShowLoading(false);
  }, 2000);

  return (
    <IonContent>
      <IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>
      <IonLoading
        cssClass='my-custom-class'
        isOpen={showLoading}
        onDidDismiss={() => setShowLoading(false)}
        message='Please wait...'
        duration={5000}
      />
    </IonContent>
  );
};

export default Tab1;

We add the IonButton to set the showLoading state.

Then we pass that into the isOpen prop of the IonLoading component to control when it loads.

The onDidDismiss prop’s function is run when we close the loading indicator.

duration has the duration to show the loading indicator.

Progress Bar

We can add a progress bar by using the IonProgressBar component.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
    </IonContent>
  );
};

export default Tab1;

to add a progress bar with the IonProgressBar component.

The color is set to primary to change the color blue.

value has the progress value.

Also, we can add the buffer prop to add a lighter line to the progress bar:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
    </IonContent>
  );
};

export default Tab1;

Skeleton Text

We can show skeleton text when we’re loading something in our app.

For instance, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot="start" />
          <IonLabel>
            <h3>
              <IonSkeletonText animated style={{ width: '50%' }} />
            </h3>
            <p>
              <IonSkeletonText animated style={{ width: '80%' }} />
            </p>
            <p>
              <IonSkeletonText animated style={{ width: '60%' }} />
            </p>
          </IonLabel>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the IonSkeletonText component to add a placeholder bar for the skeleton text.

animated makes it animated.

Conclusion

We can add various loading indicators and popovers 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.

Avatars

We can add avatars with the IonAvatar component.

For example, we can write:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonAvatar>
        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
      </IonAvatar>
    </IonContent>
  );
};

export default Tab1;

to add an avatar with an image.

Also, we can put the avatar in a chip:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonChip>
        <IonAvatar>
          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
        </IonAvatar>
        <IonLabel>Chip Avatar</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Images

We can add an image with the IonImg component.

For example, we can write:

import React from 'react';
import { IonContent, IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/react';
import './Tab1.css';

interface Item {
  src: string;
  text: string;
};
const items: Item[] = [{
  src: 'http://placekitten.com/g/200/300',
  text: 'cat'
}];

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        {items.map((image, i) => (
          <IonItem key={i}>
            <IonThumbnail slot="start">
              <IonImg src={image.src} />
            </IonThumbnail>
            <IonLabel>{image.text}</IonLabel>
          </IonItem>
        ))}
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the IonThumbnail component to show the image thumbnail.

Thumbnail

We can also use the IonThumbnail component with an img element.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonThumbnail>
        <img src="http://placekitten.com/g/200/300" />
      </IonThumbnail>
    </IonContent>
  );
};

export default Tab1;

to show the img as a thumbnail.

Modal

We can add modals with the IonModal component.

For example, we can write:

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

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

  return (
    <IonContent>
      <IonModal isOpen={showModal} cssClass='my-custom-class'>
        <p>This is modal content</p>
        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
    </IonContent>
  );
};

export default Tab1;

to add the modal to our app.

isOpen takes the open state of the modal.

cssClass lets us add a class name to make styling easy.

setShowModal sets display state of the modal.

Backdrop

We can add a backdrop with the IonBackdrop component.

For example, we can write:

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

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

export default Tab1;

to add the backdrop.

Also, we can change how the backdrop event is propagated, visibility, and whether it’s tappable with some props:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonBackdrop stopPropagation={false} visible tappable />
    </IonContent>
  );
};

export default Tab1;

Conclusion

We can add avatars, thumbnails, modals, and backdrops 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.

Note

We can add notes display with the IonNote component.

For instance, we can use it by writing:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonNote>Default Note</IonNote><br />
    </IonContent>
  );
};

export default Tab1;

We can also add color to it with the color prop:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonNote color="secondary">Secondary Note</IonNote><br />
    </IonContent>
  );
};

export default Tab1;

Also, we can add notes in a list:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>Note (End)</IonLabel>
          <IonNote slot="end">On</IonNote>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Lists

We can add lists with the IonList component.

For example, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonList } 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 = () => {

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>Pokemon</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Megaman</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>The Legend of Zelda</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Pac-Man</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Super Mario World</IonLabel>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add the IonList with the IonItem as the list items.

We can add inputs and toggles into the list:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>Input</IonLabel>
          <IonInput></IonInput>
        </IonItem>
        <IonItem>
          <IonLabel>Toggle</IonLabel>
          <IonToggle slot="end"></IonToggle>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

List Header

We can add a list header with the IonListHeader component.

For example, we can write:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonListHeader>
        <IonLabel>List Header</IonLabel>
      </IonListHeader>
    </IonContent>
  );
};

export default Tab1;

And we can add the list content below the header:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonListHeader>
        <IonLabel>List Header</IonLabel>
      </IonListHeader>
      <IonItem>
        <IonLabel color="primary">
          <h1>harry</h1>
        </IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel color="primary">
          <h1>christmas</h1>
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

color sets the color of the item.

We can also add the lines prop to the IonItem to change the line style.

Conclusion

We can add list headers and items, and notes 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.

Items

We can add an item into the Ionic component by using the IonItem and IonLabel components.

For example, we can write:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem>
        <IonLabel>
          Item
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

to add the item.

We can add the detail prop to add a detail arrow:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem detail>
        <IonLabel>
          Item
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

We can add a onClick prop to add a click handler for the item:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem button onClick={() => { }} detail>
        <IonLabel>
          Button Item with Detail Arrow
          </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

And we can use it as a link:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem detail={false} href="https://www.ionicframework.com">
        <IonLabel>
          Button Item with Detail Arrow
          </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

We can add lines with the lines prop:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem lines="full">
        <IonLabel>Item Lines Full</IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

Item Divider

We can add an item divider between the items.

For instance, we can write:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItemDivider>
        <IonLabel>
          Basic Item Divider
        </IonLabel>
      </IonItemDivider>
      <IonItemDivider color="secondary">
        <IonLabel>
          Secondary Item Divider
        </IonLabel>
      </IonItemDivider>
    </IonContent>
  );
};

export default Tab1;

We add the IonItemDivider around the IonLabel to add items.

Item Groups

We can group items with item groups.

For example, we can write:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItemGroup>
        <IonItemDivider>
          <IonLabel>A</IonLabel>
        </IonItemDivider>
        <IonItem>
          <IonLabel>Angola</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Argentina</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Armenia</IonLabel>
        </IonItem>
      </IonItemGroup>
    </IonContent>
  );
};

export default Tab1;

We add the IonItemDivider , IonLabel , and IonLitem inside the IonItemGroup to group them.

IonItemDivider is used for the headings.

We can also put the IonItemSliding component inside the group:

import React from 'react';
import { IonContent, IonItem, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItemGroup>
        <IonItemSliding>
          <IonItem>
            <IonLabel>
              <h3>Grapes</h3>
            </IonLabel>
          </IonItem>
          <IonItemOptions>
            <IonItemOption>
              Favorite
          </IonItemOption>
          </IonItemOptions>
        </IonItemSliding>
      </IonItemGroup>
    </IonContent>
  );
};

export default Tab1;

to make the group a sliding item.

Conclusion

We can add items and item groups with Ionic.