Drop-in replacement for native web prompts

Upgrade your alert, confirm and prompt with these API-compliant async/await components.

Available in private early access.

page.tsx
import { useCallback } from 'react'
import { confirm } from 'partyprompt'
export default function Page() {
const onDelete = useCallback(async () => {
await confirm('Are you sure?', {
actions: ['Delete', 'Cancel'],
intent: 'danger'
})
}, [])
return (
<div>
<button onClick={onDelete}>Delete</button>
</div>
)
}

UI Components

Party Prompt for Web

Demo

You can use PartyPrompt as an async/await version of common system prompts or as with a more configurable set of options:

Usage

First configure the PartyPromptProvider.

import { PartyPromptProvider, usePartyPrompt } from 'partyprompt'
import {
  AlertComponent,
  AlertToastComponent,
  // ...
} from './components'

export default function Demo() {
  return (
    <PartyPromptProvider
      type="drawer"
      prompts={[
        {
          name: 'alert',
          Component: AlertComponent,
          ToastComponent: AlertToastComponent,
        },
        // ...
      ]}
    >
      <DemoContent />
    </PartyPromptProvider>
  )
}

After this, use the usePartyPrompt hook to acquire the value that can be used to asynchronously invoke prompts.

function DemoContent() {
  const partyPrompt = usePartyPrompt()

  return (
    <div className="flex flex-col space-y-2">
      <button
        type="button"
        className="p-2 border border-gray-500 rounded-md bg-rose-200"
        onClick={async () => {
          const res = await partyPrompt.alert('An alert!')
          console.log(`partyPrompt.alert -> ${res}`)
        }}
      >
        <span className="font-mono text-xs">
          await partyPrompt.alert('An alert!')
        </span>
      </button>

      {/* ... */}
    </div>
  )
}
Previous
Architecture