@vouch-in/react

Official Vouch SDK for React - Email validation and device fingerprinting with React hooks.

Installation

npm install @vouch-in/react
# or
yarn add @vouch-in/react
# or
pnpm add @vouch-in/react

Quick Start

import { VouchProvider, useValidateEmail } from "@vouch-in/react";
import { useState } from "react";

function App() {
  return (
    <VouchProvider projectId="your-project-id" apiKey="your-client-api-key">
      <SignupForm />
    </VouchProvider>
  );
}

function SignupForm() {
  const { validate, loading, data } = useValidateEmail();
  const [email, setEmail] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await validate(email);

    if (result.recommendation === "allow") {
      console.log("Email is valid!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button disabled={loading}>
        {loading ? "Validating..." : "Sign Up"}
      </button>
      {data && data.recommendation !== "allow" && (
        <p>Email validation failed</p>
      )}
    </form>
  );
}

Hooks

useValidateEmail

const { validate, loading, data, error, reset } = useValidateEmail();

useFingerprint

const { fingerprint, loading, error, generate } = useFingerprint();

useVouch

const vouch = useVouch();

Features

• React Context Provider pattern
• TypeScript support
• Loading and error states
• Automatic device fingerprinting
• SSR compatible

Documentation

For complete documentation, examples, and API reference, visit:

docs.vouch.expert/sdks/react

Related Packages

• @vouch-in/js - Core JavaScript SDK
• @vouch-in/next - Next.js integration
• @vouch-in/node - Server-side validation

License

Proprietary. Copyright (c) Vouch. All rights reserved.

See the SDK License Agreement for terms.