@latchd/react

React components and hooks for Latchd consent capture, cookie banners, and hosted legal document rendering.

Install

npm install @latchd/react @latchd/sdk react react-dom

Quick Start

import {
  LatchdProvider,
  LatchdCookieBanner,
  LatchdDocument,
  useLatchdCookieConsent,
} from "@latchd/react";

function CookiePreferencesPanel() {
  const { state, acceptAll, rejectNonEssential } = useLatchdCookieConsent(
    "user_123",
  );

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={() => void acceptAll()}>Accept all</button>
      <button onClick={() => void rejectNonEssential()}>
        Reject non-essential
      </button>
    </div>
  );
}

export function ComplianceSettings() {
  return (
    <LatchdProvider apiKey="latchd_pk_live_...">
      <LatchdCookieBanner userId="user_123" />
      <LatchdDocument documentId="privacy-policy" />
      <CookiePreferencesPanel />
    </LatchdProvider>
  );
}

Included APIs

• LatchdProvider and useLatchdClient() for SDK access in React trees
• LatchdCookieBanner for rendering and persisting cookie preferences
• LatchdDocument for loading and displaying hosted legal documents
• LatchdClickwrap for click-to-accept consent flows
• useLatchdConsent() for document consent state
• useLatchdCookieConsent() for shared category-based cookie consent state and actions
• useLatchdCookiePreferences() for compatibility with raw cookie preference fetch/update flows

Requirements

• React 18 or newer
• React DOM 18 or newer
• A valid Latchd API key

Notes

• Built on top of @latchd/sdk
• Document HTML is sanitized before rendering
• Published with provenance from GitHub Actions

More public documentation is coming soon.