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>
  )
}