This version of the documentation is outdated. Check the latest version here!

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.

Example
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:

Name Type Default value Description
message String undefined The message to present.
title String undefined (Optional) - Title for the dialog.
okText String 'OK' (Optional) - Text for the button which closes the dialog. If not specified, uses the okText of the language specified in the global settings.
display String 'center' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
callback Function undefined (Optional) - A function which executes when the dialog is dismissed.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be 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.

Example
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:

Name Type Default Description
message String undefined The message to present.
title String undefined (Optional) - Title for the dialog.
okText String 'OK' (Optional) - Text for the button which confirms the dialog. If not specified, uses the okText of the language specified in the global settings.
cancelText String 'Cancel' (Optional) - Text for the button which cancels the dialog. If not specified, uses the cancelText of the language specified in the global settings.
display String 'center' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
callback Function undefined (Optional) - A function which executes when the dialog closes. It receives a boolean parameter which is true, if the alert was confirmed, otherwise false.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be 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.

Example
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:

Name Type Default Description
message String undefined The message to present.
title String undefined (Optional) - Title for the dialog.
okText String 'OK' (Optional) - Text for the button which submits the entered value. If not specified, uses the okText of the language specified in the global settings.
cancelText String 'Cancel' (Optional) - Text for the button which cancels the dialog. If not specified, uses the cancelText of the language specified in the global settings.
placeholder String undefined (Optional) - Placeholder text for the displayed input.
label String undefined (Optional) - Label for the displayed input.
inputType String undefined (Optional) - Type of the displayed input..
value String undefined (Optional) - Initial value of the displayed input.
display String 'center' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
callback Function undefined (Optional) - A function which executes when the dialog closes. It receives a parameter which containes the entered value as string, or null, if nothing was entered.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be 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.

Example
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

Name Type Default Description
message String undefined The message to present.
duration Number, Boolean 3000 (Optional) - Display time of the message in milliseconds. If false, the message will be persistent.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
color String undefined (Optional) - Specifies the predefined background color of the toast, each serving its own semantic purpose. Possible values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info'.
callback Function undefined (Optional) - A function which executes when the message hides.

Returns: Promise

A promise which is resolved when the toast hides.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be 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.

Example
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:

Name Type Default Description
message String undefined The message to present.
duration Number, Boolean 3000 (Optional) - Display time of the message in milliseconds. If false, the message will be persistent.
button Object undefined (Optional) - Displays an action button on the snackbar. Properties:
  • text:String - Text of the button.
  • icon:String (Optional) - Specifies the icon of the button.
  • action:Function - A function which executes when the button is tapped.
display String 'bottom' (Optional) - Controls the positioning of the dialog. Possible options: 'bottom', 'center', 'top'.
color String undefined (Optional) - Specifies the predefined background color of the toast, each serving its own semantic purpose. Possible values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info'.
callback Function undefined (Optional) - A function which executes when the message hides.

Returns: Promise

A promise which is resolved when the snackbar hides.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined.