React
Protect React routes and components with the WaitroomGate component.
Terminal
npm install @waitrooms/sdkWrap whatever should only render for visitors who are through the line:
TSX
import { WaitroomGate } from "@waitrooms/sdk/react";
export default function CheckoutPage() {
return (
<WaitroomGate room="your-room" fallback={<Spinner />}>
<Checkout />
</WaitroomGate>
);
}The gate behaves exactly like the script tag: it renders fallback while it checks, renders the children once the visitor holds a pass, and sends them to the waiting page otherwise. Mounting it more than once at a time (for example under React's development StrictMode) is safe; concurrent checks share one request.
| Prop | Meaning |
|---|---|
room | Room ID. |
apiUrl | Defaults to https://api.waitrooms.dev. |
fallback | What to show while checking. |
Something unclear? Email hello@waitrooms.dev.