Build a custom waitlist form
Clerk's <Waitlist /> component provides an out-of-the-box solution for allowing users to join your waitlist for early access to your app. However, if you're building a custom user interface, you can use the useWaitlist() hook to build a custom waitlist form.
This guide demonstrates how to use the Clerk API to build a custom user interface for joining your app's waitlist.
Before you start
Before using the useWaitlist() hook, you must enable Waitlist mode in the Clerk Dashboard:
- In the Clerk Dashboard, navigate to the Waitlist page.
- Toggle on Enable waitlist and select Save.
Build the custom flow
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.
import { useWaitlist } from '@clerk/chrome-extension'
export default function Waitlist() {
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