Member-only story

How To Build a Modal With Ionic and React

How to declare and pass parameters to an Ionic + React modal

David Dal Busco
Better Programming

Photo by timJ on Unsplash

I’m having fun with Ionic React these days and am, therefore, experimenting with different components.

One of these, which I use almost without exception in all applications, is the modal.

Although its dedicated documentation is pretty neat, I went a bit further, as I like to declare them in their own separate components. That’s why I’m writing this new blog post.

Getting Started

To add a modal to an application, we proceed as displayed in the documentation (told you, it is well-documented).

We use the component IonModal and, to trigger its opening and closing, we also use a state (with the help of a useState Hook) to modify its property isOpen.

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

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

return (
<IonContent>
<IonModal isOpen={showModal}>
<p>This is the modal content.</p>
<IonButton onClick={() => setShowModal(false)}>
Close Modal
</IonButton>
</IonModal>
<IonButton onClick={() => setShowModal(true)}>…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (1)

Write a response

Thanks David for this article.
Would you have any example on how to properly use Modal Controller in React ?
Thanks

Recommended from Medium

Lists

See more recommendations