useWaitlist()
The useWaitlist() hook provides access to the Waitlist object, which provides methods and properties to manage waitlist entries in your application. This hook is useful for building a instead of using the prebuilt <Waitlist /> component.
Returns
- Name
waitlist- Type
- Waitlist
- Description
The current active
Waitlistinstance, for use in custom flows.
- Name
errors- Type
Errors- Description
The errors that occurred during the last API request.
- Name
fetchStatus- Type
'idle' | 'fetching'- Description
The fetch status of the underlying
Waitlistresource.
Example
The following example demonstrates how to use the useWaitlist() hook to create a custom waitlist form. Users can submit their email address to join the waitlist, and the component displays appropriate feedback based on the submission state.
'use client'
import { useWaitlist } from '@clerk/nextjs'
export default function Page() {
const { waitlist, errors, fetchStatus } = useWaitlist()
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
const emailAddress = formData.get('emailAddress') as string
const { error } = await waitlist.join({ emailAddress })
if (error) {
console.error('Failed to join waitlist:', error)
}
}
if (waitlist.id) {
return (
<div>
<h1>Successfully joined the waitlist!</h1>
<p>We'll notify you when you're approved.</p>
</div>
)
}
return (
<div>
<h1>Join the Waitlist</h1>
<form onSubmit={handleSubmit}>
<label htmlFor="email">Email address</label>
<input id="email" name="emailAddress" type="email" required />
{errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
<button type="submit" disabled={fetchStatus === 'fetching'}>
{fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
</button>
</form>
</div>
)
}Feedback
Last updated on