---
title: "React Forms Toast & snackbar Example | Mobiscroll"
component: "Forms"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/forms/notifications"
---

# Toast & snackbar - React Forms demo

React notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/forms/notifications)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/form-components/forms/notifications)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/form-components/forms/notifications)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/notifications.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/notifications.md), [Angular](https://demo.mobiscroll.com/angular/forms/notifications.md), [Vue](https://demo.mobiscroll.com/vue/forms/notifications.md)

## Description

Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.

## What this demo shows

- This demo shows Toast and Snackbar notifications for providing feedback and status updates without interrupting the user.
- **Placement** Notifications positioned at the top or bottom of the screen.
- **Preset styles** Primary, secondary, success, danger, warning, and info color options.
- **Toast** Lightweight, temporary messages that confirm an action has been completed.
- **Snackbar** Notifications displayed with or without an action button.
- **Snackbar actions** Custom action labels that execute application logic, such as retrying a failed operation.

## Best for

- **Save confirmations** Letting users know that their data was saved successfully.
- **Event creation feedback** Confirming that an event was created without interrupting the workflow.
- **Status updates** Communicating short, temporary updates while users continue their current task.
- **Recoverable errors** Providing a Snackbar action that lets users retry a failed operation.
- **Non-blocking feedback** Sharing information that does not require a modal dialog or immediate response.

## Tutorial

### Toast

Top or bottom, in a number of preset colors, use the toast to inform users. Perfect for feedback on data save, event creation and much more.

```jsx
toast({
    message: 'Message sent'
});
                              
toast({
    message: 'Message sent',
    display: 'top'
});

toast({
    message: 'Message sent',
    color: 'primary'
});

toast({
    message: 'Message sent',
    color: 'secondary'
});

toast({
    message: 'Message sent',
    color: 'success'
});

toast({
    message: 'Message sent',
    color: 'danger'
});

toast({
    message: 'Message sent',
    color: 'warning'
});

toast({
    message: 'Message sent',
    color: 'info'
});
```

### Snackbar

The snackbar can be rendered with or without and action. Actions can have custom labels and when clicked can call any custom code.

```jsx
snackbar({
    message: 'Your draft has been discarded'
});

snackbar({
    message: 'Your draft has been discarded',
    display: 'top'
});

snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            toast({
                message: 'Retrying...'
            });
        }
    }
});

snackbar({
    message: 'Your draft has been discarded',
    color: 'primary'
});

snackbar({
    message: 'Your draft has been discarded',
    color: 'secondary'
});

snackbar({
    message: 'Your draft has been discarded',
    color: 'success'
});

snackbar({
    message: 'Your draft has been discarded',
    color: 'danger'
});

snackbar({
    message: 'Your draft has been discarded',
    color: 'warning'
});

snackbar({
    message: 'Your draft has been discarded',
    color: 'info'
});
```

## Code

### JSX

```jsx
import { Button, Page, setOptions, Snackbar, Toast } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [isBottomToastOpen, setBottomToastOpen] = useState(false);
  const [isTopToastOpen, setTopToastOpen] = useState(false);
  const [isPrimaryToastOpen, setPrimaryToastOpen] = useState(false);
  const [isSecondaryToastOpen, setSecondaryToastOpen] = useState(false);
  const [isSuccessToastOpen, setSuccessToastOpen] = useState(false);
  const [isDangerToastOpen, setDangerToastOpen] = useState(false);
  const [isWarningToastOpen, setWarningToastOpen] = useState(false);
  const [isInfoToastOpen, setInfoToastOpen] = useState(false);
  const [isRetryToastOpen, setRetryToastOpen] = useState(false);

  const [isBottomSnackbarOpen, setBottomSnackbarOpen] = useState(false);
  const [isTopSnackbarOpen, setTopSnackbarOpen] = useState(false);
  const [isActionSnackbarOpen, setActionSnackbarOpen] = useState(false);
  const [isPrimarySnackbarOpen, setPrimarySnackbarOpen] = useState(false);
  const [isSecondarySnackbarOpen, setSecondarySnackbarOpen] = useState(false);
  const [isSuccessSnackbarOpen, setSuccessSnackbarOpen] = useState(false);
  const [isDangerSnackbarOpen, setDangerSnackbarOpen] = useState(false);
  const [isWarningSnackbarOpen, setWarningSnackbarOpen] = useState(false);
  const [isInfoSnackbarOpen, setInfoSnackbarOpen] = useState(false);

  const showBottomToast = useCallback(() => {
    setBottomToastOpen(true);
  }, []);

  const showTopToast = useCallback(() => {
    setTopToastOpen(true);
  }, []);

  const showPrimaryToast = useCallback(() => {
    setPrimaryToastOpen(true);
  }, []);

  const showSecondaryToast = useCallback(() => {
    setSecondaryToastOpen(true);
  }, []);

  const showSuccessToast = useCallback(() => {
    setSuccessToastOpen(true);
  }, []);

  const showDangerToast = useCallback(() => {
    setDangerToastOpen(true);
  }, []);

  const showWarningToast = useCallback(() => {
    setWarningToastOpen(true);
  }, []);

  const showInfoToast = useCallback(() => {
    setInfoToastOpen(true);
  }, []);

  const showBottomSnackbar = useCallback(() => {
    setBottomSnackbarOpen(true);
  }, []);

  const showTopSnackbar = useCallback(() => {
    setTopSnackbarOpen(true);
  }, []);

  const showActionSnackbar = useCallback(() => {
    setActionSnackbarOpen(true);
  }, []);

  const showPrimarySnackbar = useCallback(() => {
    setPrimarySnackbarOpen(true);
  }, []);

  const showSecondarySnackbar = useCallback(() => {
    setSecondarySnackbarOpen(true);
  }, []);

  const showSuccessSnackbar = useCallback(() => {
    setSuccessSnackbarOpen(true);
  }, []);

  const showDangerSnackbar = useCallback(() => {
    setDangerSnackbarOpen(true);
  }, []);

  const showWarningSnackbar = useCallback(() => {
    setWarningSnackbarOpen(true);
  }, []);

  const showInfoSnackbar = useCallback(() => {
    setInfoSnackbarOpen(true);
  }, []);

  const handleBottomToastClose = useCallback(() => {
    setBottomToastOpen(false);
  }, []);

  const handleTopToastClose = useCallback(() => {
    setTopToastOpen(false);
  }, []);

  const handlePrimaryToastClose = useCallback(() => {
    setPrimaryToastOpen(false);
  }, []);

  const handleSecondaryToastClose = useCallback(() => {
    setSecondaryToastOpen(false);
  }, []);

  const handleSuccessToastClose = useCallback(() => {
    setSuccessToastOpen(false);
  }, []);

  const handleDangerToastClose = useCallback(() => {
    setDangerToastOpen(false);
  }, []);

  const handleWarningToastClose = useCallback(() => {
    setWarningToastOpen(false);
  }, []);

  const handleInfoToastClose = useCallback(() => {
    setInfoToastOpen(false);
  }, []);

  const handleRetryToastClose = useCallback(() => {
    setRetryToastOpen(false);
  }, []);

  const handleBottomSnackbarClose = useCallback(() => {
    setBottomSnackbarOpen(false);
  }, []);

  const handleTopSnackbarClose = useCallback(() => {
    setTopSnackbarOpen(false);
  }, []);

  const handleActionSnackbarClose = useCallback(() => {
    setActionSnackbarOpen(false);
  }, []);

  const handlePrimarySnackbarClose = useCallback(() => {
    setPrimarySnackbarOpen(false);
  }, []);

  const handleSecondarySnackbarClose = useCallback(() => {
    setSecondarySnackbarOpen(false);
  }, []);

  const handleSuccessSnackbarClose = useCallback(() => {
    setSuccessSnackbarOpen(false);
  }, []);

  const handleDangerSnackbarClose = useCallback(() => {
    setDangerSnackbarOpen(false);
  }, []);

  const handleWarningSnackbarClose = useCallback(() => {
    setWarningSnackbarOpen(false);
  }, []);

  const handleInfoSnackbarClose = useCallback(() => {
    setInfoSnackbarOpen(false);
  }, []);

  const snackbarButton = useMemo(
    () => ({
      text: 'Retry',
      action: () => {
        setRetryToastOpen(true);
      },
    }),
    [],
  );

  return (
    <Page>
      <div className="mbsc-block">
        <div className="mbsc-block-title">Toast</div>
        <div className="mbsc-button-group-block">
          <Button onClick={showBottomToast}>Bottom toast</Button>
          <Button onClick={showTopToast}>Top toast</Button>
          <Button onClick={showPrimaryToast}>Primary toast</Button>
          <Button onClick={showSecondaryToast}>Secondary toast</Button>
          <Button onClick={showSuccessToast}>Success toast</Button>
          <Button onClick={showDangerToast}>Danger toast</Button>
          <Button onClick={showWarningToast}>Warning toast</Button>
          <Button onClick={showInfoToast}>Info toast</Button>
        </div>
        <Toast isOpen={isBottomToastOpen} message="Message sent" onClose={handleBottomToastClose} />
        <Toast isOpen={isTopToastOpen} display="top" message="Message sent" onClose={handleTopToastClose} />
        <Toast isOpen={isPrimaryToastOpen} color="primary" message="Message sent" onClose={handlePrimaryToastClose} />
        <Toast isOpen={isSecondaryToastOpen} color="secondary" message="Message sent" onClose={handleSecondaryToastClose} />
        <Toast isOpen={isSuccessToastOpen} color="success" message="Message sent" onClose={handleSuccessToastClose} />
        <Toast isOpen={isDangerToastOpen} color="danger" message="Message sent" onClose={handleDangerToastClose} />
        <Toast isOpen={isWarningToastOpen} color="warning" message="Message sent" onClose={handleWarningToastClose} />
        <Toast isOpen={isInfoToastOpen} color="info" message="Message sent" onClose={handleInfoToastClose} />
        <Toast isOpen={isRetryToastOpen} message="Retrying..." onClose={handleRetryToastClose} />
      </div>
      <div className="mbsc-block">
        <div className="mbsc-block-title">Snackbar</div>
        <div className="mbsc-button-group-block">
          <Button onClick={showBottomSnackbar}>Bottom snackbar</Button>
          <Button onClick={showTopSnackbar}>Top snackbar</Button>
          <Button onClick={showActionSnackbar}>Snackbar with action</Button>
          <Button onClick={showPrimarySnackbar}>Primary snackbar</Button>
          <Button onClick={showSecondarySnackbar}>Secondary snackbar</Button>
          <Button onClick={showSuccessSnackbar}>Success snackbar</Button>
          <Button onClick={showDangerSnackbar}>Danger snackbar</Button>
          <Button onClick={showWarningSnackbar}>Warning snackbar</Button>
          <Button onClick={showInfoSnackbar}>Info snackbar</Button>
        </div>
        <Snackbar isOpen={isBottomSnackbarOpen} message="Your draft has been discarded" onClose={handleBottomSnackbarClose} />
        <Snackbar isOpen={isTopSnackbarOpen} display="top" message="Your draft has been discarded" onClose={handleTopSnackbarClose} />
        <Snackbar
          isOpen={isActionSnackbarOpen}
          button={snackbarButton}
          message="Connection timed out. Showing limited messages."
          onClose={handleActionSnackbarClose}
        />
        <Snackbar
          isOpen={isPrimarySnackbarOpen}
          color="primary"
          message="Your draft has been discarded"
          onClose={handlePrimarySnackbarClose}
        />
        <Snackbar
          isOpen={isSecondarySnackbarOpen}
          color="secondary"
          message="Your draft has been discarded"
          onClose={handleSecondarySnackbarClose}
        />
        <Snackbar
          isOpen={isSuccessSnackbarOpen}
          color="success"
          message="Your draft has been discarded"
          onClose={handleSuccessSnackbarClose}
        />
        <Snackbar
          isOpen={isDangerSnackbarOpen}
          color="danger"
          message="Your draft has been discarded"
          onClose={handleDangerSnackbarClose}
        />
        <Snackbar
          isOpen={isWarningSnackbarOpen}
          color="warning"
          message="Your draft has been discarded"
          onClose={handleWarningSnackbarClose}
        />
        <Snackbar isOpen={isInfoSnackbarOpen} color="info" message="Your draft has been discarded" onClose={handleInfoSnackbarClose} />
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Button, Page, setOptions, Snackbar, Toast } from '@mobiscroll/react';
import { FC, useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [isBottomToastOpen, setBottomToastOpen] = useState(false);
  const [isTopToastOpen, setTopToastOpen] = useState(false);
  const [isPrimaryToastOpen, setPrimaryToastOpen] = useState(false);
  const [isSecondaryToastOpen, setSecondaryToastOpen] = useState(false);
  const [isSuccessToastOpen, setSuccessToastOpen] = useState(false);
  const [isDangerToastOpen, setDangerToastOpen] = useState(false);
  const [isWarningToastOpen, setWarningToastOpen] = useState(false);
  const [isInfoToastOpen, setInfoToastOpen] = useState(false);
  const [isRetryToastOpen, setRetryToastOpen] = useState(false);

  const [isBottomSnackbarOpen, setBottomSnackbarOpen] = useState(false);
  const [isTopSnackbarOpen, setTopSnackbarOpen] = useState(false);
  const [isActionSnackbarOpen, setActionSnackbarOpen] = useState(false);
  const [isPrimarySnackbarOpen, setPrimarySnackbarOpen] = useState(false);
  const [isSecondarySnackbarOpen, setSecondarySnackbarOpen] = useState(false);
  const [isSuccessSnackbarOpen, setSuccessSnackbarOpen] = useState(false);
  const [isDangerSnackbarOpen, setDangerSnackbarOpen] = useState(false);
  const [isWarningSnackbarOpen, setWarningSnackbarOpen] = useState(false);
  const [isInfoSnackbarOpen, setInfoSnackbarOpen] = useState(false);

  const showBottomToast = useCallback(() => {
    setBottomToastOpen(true);
  }, []);

  const showTopToast = useCallback(() => {
    setTopToastOpen(true);
  }, []);

  const showPrimaryToast = useCallback(() => {
    setPrimaryToastOpen(true);
  }, []);

  const showSecondaryToast = useCallback(() => {
    setSecondaryToastOpen(true);
  }, []);

  const showSuccessToast = useCallback(() => {
    setSuccessToastOpen(true);
  }, []);

  const showDangerToast = useCallback(() => {
    setDangerToastOpen(true);
  }, []);

  const showWarningToast = useCallback(() => {
    setWarningToastOpen(true);
  }, []);

  const showInfoToast = useCallback(() => {
    setInfoToastOpen(true);
  }, []);

  const showBottomSnackbar = useCallback(() => {
    setBottomSnackbarOpen(true);
  }, []);

  const showTopSnackbar = useCallback(() => {
    setTopSnackbarOpen(true);
  }, []);

  const showActionSnackbar = useCallback(() => {
    setActionSnackbarOpen(true);
  }, []);

  const showPrimarySnackbar = useCallback(() => {
    setPrimarySnackbarOpen(true);
  }, []);

  const showSecondarySnackbar = useCallback(() => {
    setSecondarySnackbarOpen(true);
  }, []);

  const showSuccessSnackbar = useCallback(() => {
    setSuccessSnackbarOpen(true);
  }, []);

  const showDangerSnackbar = useCallback(() => {
    setDangerSnackbarOpen(true);
  }, []);

  const showWarningSnackbar = useCallback(() => {
    setWarningSnackbarOpen(true);
  }, []);

  const showInfoSnackbar = useCallback(() => {
    setInfoSnackbarOpen(true);
  }, []);

  const handleBottomToastClose = useCallback(() => {
    setBottomToastOpen(false);
  }, []);

  const handleTopToastClose = useCallback(() => {
    setTopToastOpen(false);
  }, []);

  const handlePrimaryToastClose = useCallback(() => {
    setPrimaryToastOpen(false);
  }, []);

  const handleSecondaryToastClose = useCallback(() => {
    setSecondaryToastOpen(false);
  }, []);

  const handleSuccessToastClose = useCallback(() => {
    setSuccessToastOpen(false);
  }, []);

  const handleDangerToastClose = useCallback(() => {
    setDangerToastOpen(false);
  }, []);

  const handleWarningToastClose = useCallback(() => {
    setWarningToastOpen(false);
  }, []);

  const handleInfoToastClose = useCallback(() => {
    setInfoToastOpen(false);
  }, []);

  const handleRetryToastClose = useCallback(() => {
    setRetryToastOpen(false);
  }, []);

  const handleBottomSnackbarClose = useCallback(() => {
    setBottomSnackbarOpen(false);
  }, []);

  const handleTopSnackbarClose = useCallback(() => {
    setTopSnackbarOpen(false);
  }, []);

  const handleActionSnackbarClose = useCallback(() => {
    setActionSnackbarOpen(false);
  }, []);

  const handlePrimarySnackbarClose = useCallback(() => {
    setPrimarySnackbarOpen(false);
  }, []);

  const handleSecondarySnackbarClose = useCallback(() => {
    setSecondarySnackbarOpen(false);
  }, []);

  const handleSuccessSnackbarClose = useCallback(() => {
    setSuccessSnackbarOpen(false);
  }, []);

  const handleDangerSnackbarClose = useCallback(() => {
    setDangerSnackbarOpen(false);
  }, []);

  const handleWarningSnackbarClose = useCallback(() => {
    setWarningSnackbarOpen(false);
  }, []);

  const handleInfoSnackbarClose = useCallback(() => {
    setInfoSnackbarOpen(false);
  }, []);

  const snackbarButton = useMemo(
    () => ({
      text: 'Retry',
      action: () => {
        setRetryToastOpen(true);
      },
    }),
    [],
  );

  return (
    <Page>
      <div className="mbsc-block">
        <div className="mbsc-block-title">Toast</div>
        <div className="mbsc-button-group-block">
          <Button onClick={showBottomToast}>Bottom toast</Button>
          <Button onClick={showTopToast}>Top toast</Button>
          <Button onClick={showPrimaryToast}>Primary toast</Button>
          <Button onClick={showSecondaryToast}>Secondary toast</Button>
          <Button onClick={showSuccessToast}>Success toast</Button>
          <Button onClick={showDangerToast}>Danger toast</Button>
          <Button onClick={showWarningToast}>Warning toast</Button>
          <Button onClick={showInfoToast}>Info toast</Button>
        </div>
        <Toast isOpen={isBottomToastOpen} message="Message sent" onClose={handleBottomToastClose} />
        <Toast isOpen={isTopToastOpen} display="top" message="Message sent" onClose={handleTopToastClose} />
        <Toast isOpen={isPrimaryToastOpen} color="primary" message="Message sent" onClose={handlePrimaryToastClose} />
        <Toast isOpen={isSecondaryToastOpen} color="secondary" message="Message sent" onClose={handleSecondaryToastClose} />
        <Toast isOpen={isSuccessToastOpen} color="success" message="Message sent" onClose={handleSuccessToastClose} />
        <Toast isOpen={isDangerToastOpen} color="danger" message="Message sent" onClose={handleDangerToastClose} />
        <Toast isOpen={isWarningToastOpen} color="warning" message="Message sent" onClose={handleWarningToastClose} />
        <Toast isOpen={isInfoToastOpen} color="info" message="Message sent" onClose={handleInfoToastClose} />
        <Toast isOpen={isRetryToastOpen} message="Retrying..." onClose={handleRetryToastClose} />
      </div>
      <div className="mbsc-block">
        <div className="mbsc-block-title">Snackbar</div>
        <div className="mbsc-button-group-block">
          <Button onClick={showBottomSnackbar}>Bottom snackbar</Button>
          <Button onClick={showTopSnackbar}>Top snackbar</Button>
          <Button onClick={showActionSnackbar}>Snackbar with action</Button>
          <Button onClick={showPrimarySnackbar}>Primary snackbar</Button>
          <Button onClick={showSecondarySnackbar}>Secondary snackbar</Button>
          <Button onClick={showSuccessSnackbar}>Success snackbar</Button>
          <Button onClick={showDangerSnackbar}>Danger snackbar</Button>
          <Button onClick={showWarningSnackbar}>Warning snackbar</Button>
          <Button onClick={showInfoSnackbar}>Info snackbar</Button>
        </div>
        <Snackbar isOpen={isBottomSnackbarOpen} message="Your draft has been discarded" onClose={handleBottomSnackbarClose} />
        <Snackbar isOpen={isTopSnackbarOpen} display="top" message="Your draft has been discarded" onClose={handleTopSnackbarClose} />
        <Snackbar
          isOpen={isActionSnackbarOpen}
          button={snackbarButton}
          message="Connection timed out. Showing limited messages."
          onClose={handleActionSnackbarClose}
        />
        <Snackbar
          isOpen={isPrimarySnackbarOpen}
          color="primary"
          message="Your draft has been discarded"
          onClose={handlePrimarySnackbarClose}
        />
        <Snackbar
          isOpen={isSecondarySnackbarOpen}
          color="secondary"
          message="Your draft has been discarded"
          onClose={handleSecondarySnackbarClose}
        />
        <Snackbar
          isOpen={isSuccessSnackbarOpen}
          color="success"
          message="Your draft has been discarded"
          onClose={handleSuccessSnackbarClose}
        />
        <Snackbar
          isOpen={isDangerSnackbarOpen}
          color="danger"
          message="Your draft has been discarded"
          onClose={handleDangerSnackbarClose}
        />
        <Snackbar
          isOpen={isWarningSnackbarOpen}
          color="warning"
          message="Your draft has been discarded"
          onClose={handleWarningSnackbarClose}
        />
        <Snackbar isOpen={isInfoSnackbarOpen} color="info" message="Your draft has been discarded" onClose={handleInfoSnackbarClose} />
      </div>
    </Page>
  );
};
export default App;
```

## Implementation notes

- `message` sets the notification text for both `toast` and `snackbar`.
- `color` sets a preset color for either notification type: `primary`, `secondary`, `success`, `danger`, `warning`, `info`. Omitting it renders the default (neutral) style.
- `display: 'top'` positions the notification at the top of its container; omitting `display` defaults to bottom placement.
- `context` scopes the notification to render inside a given container element/selector instead of the document body - used in the demo to keep each notification confined to the demo panel.
- A snackbar action button is added with `button: { text: string, action: () => void }`; `text` labels the button and `action` runs on click (the demo's action re-triggers a `toast` call to confirm the retry).
- Framework invocation differs by framework: JS/jQuery call the global `mobiscroll.toast({...})` / `mobiscroll.snackbar({...})` functions imperatively from a click handler; Angular injects the `Notifications` service and calls `this.notify.toast({...})` / `this.notify.snackbar({...})`; React and Vue instead render declarative `<Toast>`/`<Snackbar>` components (`MbscToast`/`MbscSnackbar` in Vue) with a boolean `isOpen` prop (`:isOpen` in Vue) held in state and set to `true` to show the notification, and an `onClose`/`@close` callback that resets that state when the notification dismisses itself.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Alert, confirm & prompt](https://demo.mobiscroll.com/react/forms/alert-confirm-prompt.md) - React alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry.