Alerts
Alerts are urgent interruptions that inform the user about a situation. May also collect information from the user. It appears on top of the app's content, and must be manually dismissed before resuming interaction with the app.
Alert
alert(config)
Description
An alert dialog notifies or warns the user about something. It contains a single button which closes the alert.
import { alert } from '@mobiscroll/react';
// ...
alert({
title: 'Cellular Data is Turned Off for "Safari"',
message: 'You can turn on cellular data for this app in Settings.'
});
For many more examples - simple and complex use-cases - check out the alert and notification demos for react.
Parameters
The configuration object for the alert dialog can have the following properties:
Returns: Promise
A promise which is resolved when the popup is closed.
undefined.
Confirm
confirm(config)
Description
A confirm dialog is used when it is required to confirm an action. It has two buttons, one of which confirms the action, and the other rejects it.
import { confirm } from '@mobiscroll/react';
// ...
// Using callback function
confirm({
title: 'Use location service?',
message: 'Help apps determine the location. This means sending anonymous location data, even when no apps are running.',
okText: 'Agree',
cancelText: 'Disagree',
callback: function (result) {
console.log(result ? 'Agreed.' : 'Disagreed.');
}
});
// Using promise
confirm({
title: 'Use location service?',
message: 'Help apps determine the location. This means sending anonymous location data, even when no apps are running.',
okText: 'Agree',
cancelText: 'Disagree'
}).then(function (result) {
console.log(result ? 'Agreed.' : 'Disagreed.');
});
For many more examples - simple and complex use-cases - check out the alert and notification demos for react.
Parameters
The configuration object for the confirm dialog can have the following properties:
Returns: Promise
A promise which is resolved when the popup is closed.
undefined.
Prompt
prompt(config)
Description
A prompt dialog is used when it is 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.
import { prompt } from '@mobiscroll/react';
// ...
// Using callback function
prompt({
title: 'Sign in to iTunes Store',
message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
placeholder: 'Password',
inputType: 'password',
callback: function (value) {
console.log('The password is: ' + value);
}
});
// Using promise
prompt({
title: 'Sign in to iTunes Store',
message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
placeholder: 'Password',
inputType: 'password'
}).then(function (value) {
console.log('The password is: ' + value);
});
For many more examples - simple and complex use-cases - check out the alert and notification demos for react.
Parameters
The configuration object for the prompt dialog can have the following properties:
Returns: Promise
A promise which is resolved when the popup is closed.
undefined.
Notifications
Toast
toast(config)
Description
Toasts are simple text only notifications informing the user. They should be primarly used to display messages not necessarily related to a user action, such as background synchronization or similar. Toasts don't lock the app's main interface and are automatically dismissed after a while.
import { toast } from '@mobiscroll/react';
// ...
toast({
message: '39 files synchronized successfully.'
});
For many more examples - simple and complex use-cases - check out the alert and notification demos for react.
Parameters
Returns: Promise
A promise which is resolved when the toast hides.
undefined.
Snackbar
snackbar(config)
Description
Snackbars provide brief feedback after an action through a message at the bottom of the screen. A snackbar may contain an action, such as "Undo" or "Retry". Snackbars don't lock the app's main interface and are automatically dismissed after a while.
import { snackbar } from '@mobiscroll/react';
// ...
snackbar({
message: 'Connection timed out. Showing limited messages.',
button: {
text: 'Retry',
action: function () {
console.log('Retrying...');
}
}
});
For many more examples - simple and complex use-cases - check out the alert and notification demos for react.
Parameters
The configuration object for the snackbar can have the following properties:
Returns: Promise
A promise which is resolved when the snackbar hides.
undefined.