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 title="My title" message="My Message" />

Description

An alert dialog notifies or warns the user about something. It contains a single button which closes the alert.

import { useCallback, useState } from 'react';
import { Alert } from '@mobiscroll/react';

const App = () => {
  const [isOpen, setOpen] = useState(false);

  const openAlert = useCallback(() => {
    setOpen(true);
  }, []);

  const closeAlert = useCallback(() => {
    setOpen(false);
  }, []); 
  
  return <>
    <Alert 
		title="Cellular Data is Turned Off for "Safari"
        message="You can turn on cellular data for this app in Settings."
        isOpen={isOpen}
        onClose={closeAlert}
     />
    <button onClick={openAlert}>Open alert</button>
  </>;
}

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Props

Confirm

<Confirm title="My title" message="My Custom Message" />

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 { useCallback, useState } from 'react';
import { Confirm } from '@mobiscroll/react';

const App = () => {
  const [isOpen, setOpen] = useState(false);

  const openConfirm = useCallback(() => {
    setOpen(true);
  }, []);

  const closeConfirm = useCallback((result) => {
    setOpen(false);
    console.log(result ? 'Agreed.' : 'Disagreed.');
  }, []); 
  
  return <>
	<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'

		isOpen={isOpen}
        onClose={closeConfirm}
	/>
    <button onClick={openConfirm}>Open confirm</button>
  </>;
}

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Props

Prompt

<Prompt title="Sign in to iTunes Store" inputType="password" />

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 { useCallback, useState } from 'react';
import { Prompt } from '@mobiscroll/react';

const App = () => {
  const [isOpen, setOpen] = useState(false);

  const openPrompt = useCallback(() => {
    setOpen(true);
  }, []);

  const closePrompt = useCallback((value) => {
    setOpen(false);
    console.log('The password is: ' + value);
  }, []); 
  
  return <>
	<Prompt 
		message='Enter the Apple ID password for "hello@mobiscroll.com".'
		placeholder='Password'
		inputType='password'
		isOpen={isOpen}
        onClose={closePrompt}
	/>

    <button onClick={openPrompt}>Open prompt</button>
  </>;
}

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Props

Notifications

Toast

<Toast message="39 files synchronized successfully." />

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 { useCallback, useState } from 'react';
import { Toast } from '@mobiscroll/react';

const App = () => {
  const [isOpen, setOpen] = useState(false);

  const openToast = useCallback(() => {
    setOpen(true);
  }, []);

  const closeToast = useCallback(() => {
    setOpen(false);
  }, []); 
  
  return <>
	<Toast 
		message="39 files synchronized successfully." 
		isOpen={isOpen}
        onClose={closeToast}
	/>
    <button onClick={openToast}>Open toast</button>
  </>;
}    
    

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Props

Snackbar

<Snackbar message="Connection timed out. Showing limited messages." />

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 { useCallback, useState } from 'react';
import { Snackbar } from '@mobiscroll/react';

const App = () => {
  const [isOpen, setOpen] = useState(false);

  const openSnackbar = useCallback(() => {
    setOpen(true);
  }, []);

  const closeSnackbar = useCallback(() => {
    setOpen(false);
  }, []); 
  
  return <>
    <Snackbar
		message='Connection timed out. Showing limited messages.'
		button={{
			text: 'Retry',
			action: function () {
				console.log('Retrying...');
			}
		}}
	   isOpen={isOpen}
       onClose={closePrompt}
	/>
    <button onClick={openSnackbar}>Open snackbar</button>
  </>;
}

For many more examples - simple and complex use-cases - check out the alert and notification demos for react.

Props