Prompt Dialog Overview

---

Description

Pando’s Prompt Dialog is an standardized blocking UX used to interrupt the user’s task with important, critical, or warning information. This component displays a modal text control prompt with the given message, waits for the user to dismiss it, and returns the value that the user entered. This is the Pluralsight themed version of a browser’s native window.prompt() function.

When to use

Prompt Dialogs are meant to be a mandatory user action to confirm a user’s intent before continuing with an action. If you need a more custom blocking experience, use an

Prompt Dialog Anatomy

1. Dialog Container
2. Header (optional)
3. Heading (optional)
4. Body
5. Label (hidden or visible)
6. Input
7. Footer
8. Cancel Button
9. Confirm Button

Basic Usage

Hook usage

This component uses the hook usePrompt to display a pre-built configuration of the component. If this component does not meet the needs of your design, you are able to use the components of Alert Dialog to customize the experience as necessary.

import { Button, PromptProvider, usePrompt } from '@pluralsight/react'

function PromptDialogExample() {
  const { prompt } = usePrompt()
  const CONFIRM_KEY = 'CONFIRM'

  async function handleOnClick() {
    try {
      const validation = await prompt({
        heading: 'Validation required.',
        text: 'This action requires additional validation.',
        promptValidationKey: CONFIRM_KEY,
      })

      if (validation === CONFIRM_KEY) {
        // do something
      }
    } catch (error) {
      // handle error
    }
  }

  return <Button onClick={handleOnClick}>Update role</Button>
}

function App() {
  return (
    <PromptProvider>
      <PromptDialogExample />
    </PromptProvider>
  )
}

Import

import { PromptProvider, usePrompt } from '@pluralsight/react'

Hook usage

usePrompt is a hook that provides the async function prompt which takes the following object as an argument:

Note: those denoted with ? are optional

{
  text: string
  bodyId?: string
  headingId?: string
  heading?: string
  promptValidationKey?: string
}