How to Generate a Dynamic IonModal using useIonModal

Ionic Framework provides a powerful set of UI components to build mobile applications. One of the commonly used components is IonModal, which allows you to display a modal dialog on the screen. In this blog post, we will explore how to generate a dynamic IonModal using the useIonModal hook in TypeScript.

Prerequisites

Before we begin, make sure you have the following dependencies installed in your Ionic project:

npm install @ionic/react-hooks

Step 1: Import the required dependencies

First, let’s import the necessary dependencies in your TypeScript file:

import React from 'react';
import { IonButton, IonContent, IonModal, IonText } from '@ionic/react';
import { useIonModal } from '@ionic/react-hooks/modal';

Step 2: Create a dynamic IonModal component

To generate a dynamic IonModal, we will create a custom component that utilizes the useIonModal hook. This hook provides us with a way to control the opening and closing of the modal.

const DynamicModal: React.FC = () => {
  const [present, dismiss] = useIonModal(ModalContent, {
    cssClass: 'my-modal',
    componentProps: {
      name: 'John Doe',
      age: 25,
    },
  });

  return (
    <>
       present()}>Open Modal
       dismiss()}>Close Modal
    
  );
};

In the above code snippet, we define a custom component called DynamicModal. Inside this component, we use the useIonModal hook to handle the presentation and dismissal of the modal. The useIonModal hook takes two arguments: the modal content component and an optional configuration object.

Step 3: Create the modal content component

Next, let’s create the ModalContent component that will be displayed inside the IonModal. This component can be a functional or class-based component depending on your preference. Here’s an example of a functional component:

interface ModalContentProps {
  name: string;
  age: number;
}

const ModalContent: React.FC = ({ name, age }) => {
  return (
    
      
        
{name}
        Age: {age}
      
    
  );
};

In the ModalContent component, we receive the name and age as props and display them inside the IonModal. Feel free to customize the content based on your requirements.

Step 4: Render the dynamic IonModal

Finally, let’s render the DynamicModal component inside your main app component or any other component where you want to display the modal:

const App: React.FC = () => {
  return (
    
      
    
  );
};

That’s it! You have successfully generated a dynamic IonModal using the useIonModal hook in TypeScript. Now, when you click the “Open Modal” button, the modal will appear with the specified content, and you can close it by clicking the “Close Modal” button.

Conclusion

In this blog post, we learned how to generate a dynamic IonModal using the useIonModal hook in TypeScript. The useIonModal hook provides a convenient way to control the presentation and dismissal of the modal. By following the steps outlined in this post, you can easily create dynamic modals in your Ionic application.