@trustsig/react 1.0.0

package/README.md

@@ -0,0 +1,54 @@
+# @trustsig/react
+
+React Context Provider and hooks for TrustSig bot protection.
+
+## Installation
+
+```bash
+npm install @trustsig/react
+```
+
+## Setup
+
+Wrap your application or specific routes with the provider.
+
+```tsx
+import { TrustSigProvider } from '@trustsig/react';
+
+export default function RootLayout({ children }) {
+  return (
+    <TrustSigProvider siteKey="YOUR_PUBLIC_KEY" interceptRequests={true}>
+      {children}
+    </TrustSigProvider>
+  );
+}
+```
+
+## Usage
+
+Use the hook inside any component nested under the provider.
+
+```tsx
+import { useTrustSig } from '@trustsig/react';
+
+export function LoginForm() {
+  const { getResponse } = useTrustSig();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const token = await getResponse();
+    
+    await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'X-TrustSig-Response': token || '' },
+      body: JSON.stringify({ email: "user@example.com" })
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit">Login</button>
+    </form>
+  );
+}
+```

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@trustsig/react",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": { "build": "tsup" },
+  "dependencies": { "@trustsig/client": "*", "@trustsig/types": "*" },
+  "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }
+}

package/src/TrustSigProvider.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';
+import { TrustSigClient, ClientOptions } from '@trustsig/client';
+
+export interface TrustSigContextValue {
+  isLoaded: boolean;
+  error: Error | null;
+  getResponse: () => Promise<string | null>;
+}
+
+const TrustSigContext = createContext<TrustSigContextValue | null>(null);
+
+export interface TrustSigProviderProps extends ClientOptions {
+  children: React.ReactNode;
+}
+
+export const TrustSigProvider: React.FC<TrustSigProviderProps> = ({
+  siteKey,
+  endpoint,
+  wasmUrl,
+  interceptRequests,
+  debug,
+  nonce,
+  children,
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const client = useMemo(
+    () =>
+      new TrustSigClient({
+        siteKey,
+        endpoint,
+        wasmUrl,
+        interceptRequests,
+        debug,
+        nonce,
+      }),
+    [siteKey, endpoint, wasmUrl, interceptRequests, debug, nonce]
+  );
+
+  useEffect(() => {
+    let mounted = true;
+
+    client
+      .load()
+      .then(() => {
+        if (mounted) {
+          setIsLoaded(true);
+        }
+      })
+      .catch((err) => {
+        if (mounted) {
+          setError(err);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [client]);
+
+  const value = useMemo(
+    () => ({
+      isLoaded,
+      error,
+      getResponse: () => client.getResponse(),
+    }),
+    [isLoaded, error, client]
+  );
+
+  return React.createElement(TrustSigContext.Provider, { value }, children);
+};
+
+export const useTrustSigContext = () => {
+  const context = useContext(TrustSigContext);
+  if (!context) {
+    throw new Error("USE_TRUSTSIG_CONTEXT_ERROR");
+  }
+  return context;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './TrustSigProvider';
+export * from './useTrustSig';

package/src/useTrustSig.ts

@@ -0,0 +1,5 @@
+import { useTrustSigContext } from './TrustSigProvider';
+
+export const useTrustSig = () => {
+  return useTrustSigContext();
+};

package/tests/react.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { TrustSigProvider, useTrustSig } from '../src/index';
+
+const TestComponent = () => {
+  const { isLoaded, getResponse } = useTrustSig();
+  return React.createElement(
+    'div',
+    null,
+    isLoaded ? 'Loaded' : 'Loading',
+    React.createElement('button', { onClick: getResponse }, 'Get')
+  );
+};
+
+describe('TrustSig React Provider', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+    delete (window as any).TrustSig;
+    
+    // Prevent happy-dom from actually trying to download the remote script
+    vi.spyOn(document.head, 'appendChild').mockImplementation((node) => {
+      if (node instanceof HTMLScriptElement) {
+        setTimeout(() => {
+          if (node.onload) node.onload(new Event('load'));
+        }, 10);
+      }
+      return node;
+    });
+  });
+
+  it('renders children and provides context', async () => {
+    render(
+      React.createElement(
+        TrustSigProvider,
+        { siteKey: 'TEST' },
+        React.createElement(TestComponent)
+      )
+    );
+    expect(screen.getByText('Loading')).toBeDefined();
+    
+    const appendCall = (document.head.appendChild as any).mock.calls[0][0];
+    expect(appendCall.getAttribute('data-site-key')).toBe('TEST');
+  });
+});

package/tsup.config.ts

@@ -0,0 +1,2 @@
+import { defineConfig } from 'tsup';
+export default defineConfig({ entry: ['src/index.ts'], format: ['cjs', 'esm'], dts: true, clean: true, external: ['react', 'react-dom'] });