Prompt
A prompt dialog is used when it's required to get some data from the user, e.g. a password confirmation. It has two buttons, one of which submits the entered data, the other one cancels the dialog.
Usage
The following example displays a prompt dialog on button click.
import { useState } from 'react';
import { Prompt, Button } from '@mobiscroll/react';
function App() {
const [isOpen, setOpen] = useState(false);
const closePrompt = (result) => {
console.log('Result: ', result);
setOpen(false);
}
const openPrompt = () => setOpen(true);
return <>
<Prompt
isOpen={isOpen}
onClose={closePrompt}
title="Sign in to iTunes Store"
message="Enter the Apple ID password for 'hello@mobiscroll.com'."
placeholder="Enter password"
inputType="password"
/>
<Button onClick={openPrompt}>Get password!</Button>
</>
}
Options
Explore the following API options that help you easily configure the Prompt component.
animation
boolean | "pop" | "slide-down" | "slide-up"
Animation to use when the component is opened or closed.
Default value: undefined
cssClass
string
Specifies a custom CSS class for the component.
Default value: undefined
display
"center" | "top" | "bottom"
Controls the positioning of the component.
Default value: undefined
inputType
string
Initial value of the displayed input.
Default value: undefined
isOpen
boolean
Specifies if the component is opened or not. Use it together with the onClose event, by setting it
to false
when the component closes.
Default value: undefined
label
string
Label for the displayed input.
Default value: undefined
message
string
Message to present.
placeholder
string
Placeholder text for the displayed input.
Default value: undefined
theme
string
Specifies the visual appearance of the component.
If it is 'auto'
or undefined
, the theme will automatically be chosen based on the platform.
If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme,
it will be chosen on the iOS platform instead of the default iOS theme.
Supplied themes:
'ios'
- iOS theme'material'
- Material theme'windows'
- Windows theme
It's possible to modify theme colors or create custom themes.
Make sure that the theme you set is included in the downloaded package.
Default value: undefined
themeVariant
"auto" | "dark" | "light"
Controls which variant of the theme will be used (light or dark).
Possible values:
'light'
- Use the light variant of the theme.'dark'
- Use the dark variant of the theme.'auto'
orundefined
- Detect the preferred system theme on devices where this is supported.
To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one,
suffixed with '-dark'
, e.g.: 'my-theme'
and 'my-theme-dark'
.
Default value: undefined
title
string
Title for the dialog.
Default value: undefined
value
string
Initial value of the displayed input.
Default value: undefined
Localization
The Prompt component is fully localized. This covers date and time format, button copy, rtl and more.
cancelText
string
Text for the button which cancels the dialog.
Default value: 'Cancel'
okText
string
Text for the button which closes the dialog.
Default value: 'OK'
Events
The Prompt component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
onClose
(result: string) => void
Triggered when the component is closed.