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