`useWaitlist()` hook

useWaitlist() is the headless waitlist hook behind <WaitlistForm />. It submits the waitlist fields to the active deployment and returns the created waitlist entry so the page can decide how to show success.

Usage

The following example shows a basic usage of useWaitlist().

export default function JoinWaitlist() {  const { loading, joinWaitlist } = useWaitlist();  async function submit() {    if (loading) {      return;    }    await joinWaitlist({      first_name: 'Jane',      last_name: 'Doe',      email: 'jane@example.com',    });  }  return <button onClick={submit}>Join waitlist</button>;}

Return value

The hook returns the following fields and methods.

›

loading: boolean;

Whether the shared client is still loading or a waitlist request is currently running.

›

joinWaitlist: (params: { first_name: string; last_name: string; email: string }) => Promise<ApiResult<WaitlistResponse>>;

Submits a waitlist entry for the active deployment.

›

first_name?: string | undefined;

Submitted first name.

›

last_name?: string | undefined;

Submitted last name.

›

email?: string | undefined;

Submitted email address.

›

message?: string | undefined;

Success message returned after the waitlist entry is created.

›

entry?: WaitlistEntry | undefined;

Created waitlist entry.

›

id?: string | undefined;

Waitlist-entry identifier.

›

deployment_id?: number | undefined;

Deployment identifier that owns the waitlist entry.

›

email_address?: string | undefined;

Stored email address for the waitlist entry.

›

first_name?: string | undefined;

Stored first name.

›

last_name?: string | undefined;

Stored last name.

›

created_at?: string | undefined;

Creation timestamp for the waitlist entry.

›

updated_at?: string | undefined;

Last update timestamp for the waitlist entry.

How it works

The hook is intentionally small. It only submits the waitlist payload and reports whether the request is still running.

The stock <WaitlistForm /> adds field rendering, deployment-aware field selection, and the local submitted-state UI on top of this hook.

When the shared client is still loading, the hook returns a loading branch where joinWaitlist is unavailable.

The hook does not keep a separate success state. Higher-level UI decides whether to show a success screen from the returned waitlist response.

When to use it

Examples

Submit a basic waitlist entry

export default function BasicWaitlistForm() {  const { loading, joinWaitlist } = useWaitlist();  async function submit() {    if (loading) {      return;    }    await joinWaitlist({      first_name: 'Jane',      last_name: 'Doe',      email: 'jane@example.com',    });  }  return <button onClick={submit}>Join waitlist</button>;}

Read the created waitlist entry

export default function WaitlistSuccess() {  const { loading, joinWaitlist } = useWaitlist();  async function submit() {    if (loading) {      return;    }    const result = await joinWaitlist({      first_name: 'Jane',      last_name: 'Doe',      email: 'jane@example.com',    });    if ('data' in result) {      console.log(result.data.entry.id);      console.log(result.data.entry.email_address);    }  }  return <button onClick={submit}>Submit entry</button>;}

useWaitlist() hook