React Hook

Integrate waitlist signups into your React app with the useWaitlist hook from waitkit/react. Reactive state for join, count, loading, and error handling in React components.

The useWaitlist hook provides reactive state for joining a waitlist and fetching subscriber counts.

Setup

The hook is imported from waitkit/react and requires a configured WaitKit instance.

import { WaitKit } from "waitkit";
import { useWaitlist } from "waitkit/react";

const wk = new WaitKit({
  apiKey: "wk_...",
  projectSlug: "my-project",
});

Usage

function WaitlistForm() {
  const { join, count, isJoining, isLoading, error, refetchCount } =
    useWaitlist(wk);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await join({ email: "user@example.com" });
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>Subscribers: {count}</p>
      <button disabled={isJoining || isLoading} type="submit">
        {isJoining ? "Joining..." : "Join Waitlist"}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

Return values

Value	Type	Description
`join`	`(opts: JoinOptions) => Promise<JoinResult>`	Submits a waitlist signup
`count`	`number \| null`	Current subscriber count
`isJoining`	`boolean`	True while a `join` request is in flight
`isLoading`	`boolean`	True during the initial count fetch
`error`	`Error \| null`	Last error from `join` or `count`
`refetchCount`	`() => void`	Manually refetch the subscriber count

The hook fetches the subscriber count on mount and refetches it automatically after a successful join.

React Hook

Setup

Usage

Return values

On this page