@mondaycom/hatcha-react
v0.1.2
Published
React component for HATCHA — reverse CAPTCHA for agents
Downloads
36
Readme
@mondaycom/hatcha-react
React component and provider for HATCHA — a reverse CAPTCHA that proves you're an AI agent, not a human.
Installation
npm install @mondaycom/hatcha-react @mondaycom/hatcha-coreQuick start
1. Wrap your layout
// app/layout.tsx
import { HatchaProvider } from "@mondaycom/hatcha-react";
import "@mondaycom/hatcha-react/styles.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HatchaProvider>{children}</HatchaProvider>
</body>
</html>
);
}2. Trigger verification
"use client";
import { useHatcha } from "@mondaycom/hatcha-react";
function AgentModeButton() {
const { requestVerification } = useHatcha();
return (
<button
onClick={() =>
requestVerification((token) => {
console.log("Agent verified!", token);
})
}
>
Enter Agent Mode
</button>
);
}Theming
Pass theme="dark", theme="light", or theme="auto" to <HatchaProvider> or <Hatcha>.
Override CSS custom properties scoped under --hatcha-*:
[data-hatcha-theme] {
--hatcha-accent: #3b82f6;
--hatcha-bg: #060b18;
--hatcha-fg: #e4eaf6;
}Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| challengeEndpoint | string | "/api/hatcha/challenge" | Endpoint that returns a challenge |
| verifyEndpoint | string | "/api/hatcha/verify" | Endpoint that verifies an answer |
| onVerified | (token: string) => void | — | Called with the verification token on success |
| onClose | () => void | — | Called when the modal is dismissed |
| theme | "dark" \| "light" \| "auto" | "dark" | Color theme |
Full documentation
See the HATCHA monorepo for full documentation, server setup, and examples.