Verification Loader
A copy-paste React loading indicator for a custom access-code form built on useKnockCodes. Zero dependencies.
Best used for Composing a fully custom verification UI that still needs the standard in-flight spinner/label.
A tiny, focused component — reach for it when composing your own verification UI from scratch.
Minimal setup
const { state } = useKnockCodes({ expectedHash: hash });
{state === "submitting" && <VerificationLoader />}
- components
- knock-codes
- react
import { cx } from "./cx.ts";
export interface VerificationLoaderProps {
label?: string;
className?: string;
}
/**
* A small presentational spinner + label for the in-flight verification
* moment — the same visual `<PinInput>` shows inline via its `submitting`
* state, exposed standalone for a fully custom PIN form built directly on
* `useKnockCodes`.
*/
export function VerificationLoader({ label = "Checking...", className }: VerificationLoaderProps) {
return (
<div
role="status"
aria-live="polite"
className={cx("flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", className)}
>
<span
aria-hidden="true"
className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600 dark:border-gray-700 dark:border-t-gray-300"
/>
{label}
</div>
);
}
Add this block to your project
Recommended
npx shadcn@latest add @knock-codes/verification-loaderAlso installs
- cx (classname helper)
These install together as one atomic unit — even a presentational or read-only piece needs the full verification stack (hook, types, core) behind it to actually run.
Files created (2)
- components/knock-codes/react/cx.ts
- components/knock-codes/react/VerificationLoader.tsx
Other ways
GitHub shorthand
npx shadcn@latest add trivedi-vatsal/knock-codes/verification-loaderCopy the files by hand
- Open the Code tab in the preview above.
- Create each path listed below in your project and paste its contents in.
- Do the same for anything listed under “Also installs”, if present.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Checking..." | Text next to the spinner. |
| className | string | — | Extra classes on the container. |
Accessibility
role="status" + aria-live="polite", with the spinner itself marked aria-hidden so screen readers announce the text label once, not a decorative glyph.
Customization
The same visual `<PinInput>` shows inline via its `submitting` state, exposed standalone for a fully custom access-code form built directly on `useKnockCodes` where you're not using `<PinInput>` at all.
Need a hash? Use the hash generator on Getting Started — computed locally, never sent anywhere.
The honest version
Knock Codes stops casual visitors, search engines, and forwarded links. Local mode does not stop anyone who opens DevTools — the hash ships in your client bundle by design. Server mode (swap one prop) hides the hash from the client; children you already bundled are still in the JavaScript, and a forged session works unless you wire validateSession. A velvet rope, with an optional real lock. Never marketed as more than that.
Blocks that pair well with this one
These combine naturally with this block, whether as a shared shell, a shared session, or a common fallback.
- PIN InputA copy-paste React access-code field for building a custom gate on useKnockCodes — masked field or segmented boxes, paste support, accessible errors. Zero dependencies.
- Knock CodesA copy-paste React access screen for gating a whole page or app root — local hash or server verification, one prop swap between them. Zero dependencies.