Alert, confirm & prompt
Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.
Demo
Alert
Alerts have a title, message and a confirmation button.
<Alert
title='Cellular Data is Turned Off for "Safari"'
message="You can turn on cellular data for this app in Settings."
/>Confirm
Besides a title and message, the confrim dialog supports a customizable okText and cancelText.
<Confirm
title="Use location service?"
message="Help apps determinde location. This means sending anonymous location data, even when no apps are running."
okText="Agree"
cancelText="Disagree"
/>Prompt
Adding to the title and message, the prompt provides a focused way of capturing user input. With the inputType, passwords can be entered and the placeholder provides a helper text.
<Prompt
title="Sign in to iTunes Store"
message='Enter the Apple ID password for "hello@mobiscroll.com".'
placeholder="Password"
inputType="password"
/>JSXTSX
import { Alert, Button, Confirm, Page, Prompt, setOptions } from '@mobiscroll/react';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isAlertOpen, setAlertOpen] = useState(false);
const [isConfirmOpen, setConfirmOpen] = useState(false);
const [isPromptOpen, setPromptOpen] = useState(false);
const showAlert = useCallback(() => {
setAlertOpen(true);
}, []);
const showConfirm = useCallback(() => {
setConfirmOpen(true);
}, []);
const showPrompt = useCallback(() => {
setPromptOpen(true);
}, []);
const closeAlert = useCallback(() => {
setAlertOpen(false);
}, []);
const closeConfirm = useCallback(() => {
setConfirmOpen(false);
}, []);
const closePrompt = useCallback((value) => {
setPromptOpen(false);
console.log('The password is: ' + value);
}, []);
return (
<Page>
<Alert
title='Cellular Data is Turned Off for "Safari"'
message="You can turn on cellular data for this app in Settings."
isOpen={isAlertOpen}
onClose={closeAlert}
/>
<Confirm
title="Use location service?"
message="Help apps determinde location. This means sending anonymous location data, even when no apps are running."
okText="Agree"
cancelText="Disagree"
isOpen={isConfirmOpen}
onClose={closeConfirm}
/>
<Prompt
title="Sign in to iTunes Store"
message='Enter the Apple ID password for "hello@mobiscroll.com".'
placeholder="Password"
inputType="password"
isOpen={isPromptOpen}
onClose={closePrompt}
/>
<Button onClick={showAlert}>Alert</Button>
<Button onClick={showConfirm}>Confirm</Button>
<Button onClick={showPrompt}>Prompt</Button>
</Page>
);
}
export default App;
import { Alert, Button, Confirm, Page, Prompt, setOptions } from '@mobiscroll/react';
import { FC, useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [isAlertOpen, setAlertOpen] = useState(false);
const [isConfirmOpen, setConfirmOpen] = useState(false);
const [isPromptOpen, setPromptOpen] = useState(false);
const showAlert = () => {
setAlertOpen(true);
};
const closeAlert = useCallback(() => {
setAlertOpen(false);
}, []);
const showConfirm = () => {
setConfirmOpen(true);
};
const closeConfirm = useCallback(() => {
setConfirmOpen(false);
}, []);
const showPrompt = () => {
setPromptOpen(true);
};
const closePrompt = useCallback((value: string | null) => {
setPromptOpen(false);
console.log('The password is: ' + value);
}, []);
return (
<Page>
<Alert
title='Cellular Data is Turned Off for "Safari"'
message="You can turn on cellular data for this app in Settings."
isOpen={isAlertOpen}
onClose={closeAlert}
/>
<Confirm
title="Use location service?"
message="Help apps determinde location. This means sending anonymous location data, even when no apps are running."
okText="Agree"
cancelText="Disagree"
isOpen={isConfirmOpen}
onClose={closeConfirm}
/>
<Prompt
title="Sign in to iTunes Store"
message='Enter the Apple ID password for "hello@mobiscroll.com".'
placeholder="Password"
inputType="password"
isOpen={isPromptOpen}
onClose={closePrompt}
/>
<Button onClick={showAlert}>Alert</Button>
<Button onClick={showConfirm}>Confirm</Button>
<Button onClick={showPrompt}>Prompt</Button>
</Page>
);
};
export default App;