import React, { useCallback, useState } from 'react';
import {
IonButton,
IonContent,
IonPage,
IonModal,
IonHeader,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { useContext } from 'react';
const Body: React.FC<{
count: number;
onDismiss: () => void;
onIncrement: () => void;
}> = ({ count, onDismiss, onIncrement }) => (
My Modal
Count in modal: {count}
onIncrement()}>
Increment Count
onDismiss()}>
Close
);
const ModalWithContext: React.FC = () => {
const ctx = useContext(MyContext);
return {ctx.value}
;
};
const ModalComponent: React.FC = () => {
const [count, setCount] = useState(0);
const [show, setShow] = useState(false);
const [showContext, setShowContext] = useState(false);
const handleIncrement = useCallback(() => {
setCount(count + 1);
}, [count, setCount]);
return (
setShow(false)}>
setShow(false)}
onIncrement={handleIncrement}
/>
setShowContext(false)}>
{
setShow(true);
}}
>
Show Modal
{
setShow(true);
setTimeout(() => setShow(false), 250);
}}
>
Show Modal, hide after 250 ms
{
setShowContext(true);
}}
>
Show Modal with Context
Count: {count}
);
};
const MyContext = React.createContext({
value: 'default value',
});
export default ModalComponent;