Category: React Ionic

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.

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.