JavaScript SDK
React Hook
Use the useWaitlist hook to integrate waitlist functionality into 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 | undefined | 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.