Camera-3

import React, { useCallback, useEffect } from "react";
import { CameraResultType } from "@capacitor/core";
import { useCamera, availableFeatures } from "@ionic/react-hooks/camera";
import {
  IonButton,
  IonContent,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonPage,
  IonText,
  IonCard,
  IonCardHeader,
  IonCardContent,
  IonCardTitle,
  IonItemDivider
} from "@ionic/react";

const Camera: React.FC = () => {
  const { photo, getPhoto } = useCamera();
  const triggerCamera = useCallback(async () => {
    if (availableFeatures.getPhoto) {
      await getPhoto({
        quality: 100,
        allowEditing: false,
        resultType: CameraResultType.Uri
      });
    }
  }, [getPhoto]);

  useEffect(() => {
    console.log("photo", photo);
  }, [photo]);

  const onClick = () => {
    triggerCamera();
  };

  if (availableFeatures.getPhoto) {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Camera</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonCard>
            <IonItemDivider>
              <IonCardHeader>
                <IonCardTitle>My Photo</IonCardTitle>
              </IonCardHeader>
            </IonItemDivider>
            <IonCardContent>
              {photo && <img src={photo.webPath} alt="my pic" />}
              <IonButton style={{ marginTop: ".75em" }} onClick={onClick}>
                camera
              </IonButton>
            </IonCardContent>
          </IonCard>
        </IonContent>
      </IonPage>
    );
  }
  return (
    <IonPage>
      <IonContent>
        <IonText>No Camera Available</IonText>
      </IonContent>
    </IonPage>
  );
};

export default Camera;