Integration
React
Integrate Janus in React apps with the useJanus() hook.
Install
npm install @janus/react @janus/sdkSetup
Wrap your app with JanusProvider:
import { JanusProvider } from '@janus/react';
function App() {
return (
<JanusProvider config={{
siteKey: "jns_site_live_xxxxxxxxxxxx",
apiUrl: "https://your-janus.com",
mode: "invisible",
}}>
<YourApp />
</JanusProvider>
);
}Usage
Use the useJanus hook to verify on form submit:
import { useJanus } from '@janus/react';
function LoginForm() {
const { execute, loading, error } = useJanus();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const result = await execute();
if (result.success) {
await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({
...formData,
'janus-token': result.token,
}),
});
}
};
return (
<form onSubmit={handleSubmit}>
{error && <p className="text-red-500">{error}</p>}
<button disabled={loading}>
{loading ? 'Verifying...' : 'Log in'}
</button>
</form>
);
}Render the checkbox widget:
import { JanusProvider, JanusWidget } from '@janus/react';
function ProtectedForm() {
const [token, setToken] = useState('');
return (
<JanusProvider config={{
siteKey: "jns_site_live_xxxxxxxxxxxx",
apiUrl: "https://your-janus.com",
mode: "managed",
}}>
<form>
<JanusWidget
onVerify={(token) => setToken(token)}
onError={(err) => console.error(err)}
/>
<input type="hidden" name="janus-token" value={token} />
<button disabled={!token}>Submit</button>
</form>
</JanusProvider>
);
}Verify automatically on mount with no UI:
import { JanusInvisible } from '@janus/react';
function Page() {
return (
<JanusInvisible
onVerify={(token) => {
document.cookie = `janus-token=${token}`;
}}
/>
);
}API Reference
Prop
Type
Retry built-in
The SDK automatically retries failed network requests with exponential backoff. Client errors (4xx) are not retried.