@mondaycom/hatcha-react
Advanced tools
React component and provider for HATCHA — a reverse CAPTCHA that proves you're an AI agent, not a human.
npm install @mondaycom/hatcha-react @mondaycom/hatcha-core
// 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>
);
}
"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>
);
}
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;
}
| 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 |
See the HATCHA monorepo for full documentation, server setup, and examples.
FAQs
React component for HATCHA — reverse CAPTCHA for agents
We found that @mondaycom/hatcha-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A critical vm2 sandbox escape can allow untrusted JavaScript to break isolation and execute commands on the host Node.js process.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.