React Integration

The React layer is exported from a separate entry point to keep the core SDK tree-shakeable:

TypeScriptCopy
import { KeysetProvider, useContent, useKeysetBoolean } from "keysetapp/react";

---

Setup — KeysetProvider

Wrap your application (or the subtree that needs remote config) with KeysetProvider. It creates a single Keyset client and makes it available to all child components via React context.

TypeScript JSXCopy
import { KeysetProvider } from "keysetapp/react";

const keysetConfig = {
  apiKey: "pkey_your_public_key",
  cacheTTL: 60000,
  cache: { enabled: true, ttl: 60000 },
};

export default function App() {
  return (
    <KeysetProvider config={keysetConfig}>
      <Router />
    </KeysetProvider>
  );
}

Props

The client is memoized and only re-created when apiKey, baseUrl, retries, or timeout change.

---

useKeyset()

Returns the raw Keyset client instance from context. Use this when you need direct access to the client — for example, to call write methods.

TypeScript JSXCopy
import { useKeyset } from "keysetapp/react";

function AdminPanel() {
  const client = useKeyset();

  const handleCreate = async () => {
    await client.content.create({ key: "feature_x", value: true, type: "boolean" });
  };

  return <button onClick={handleCreate}>Enable Feature X</button>;
}

Returns — Keyset client instance.

Throws — "useKeyset must be used inside Keyset Provider" if called outside KeysetProvider.

---

useContent(options?)

Fetches all remote config entries and exposes them with loading/error state.

TypeScript JSXCopy
import { useContent } from "keysetapp/react";

function ConfigPanel() {
  const { data, loading, error, refetch } = useContent();

  if (loading) return <p>Loading config…</p>;
  if (error)   return <p>Failed to load: {error}</p>;

  return (
    <>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={refetch}>Refresh</button>
    </>
  );
}

Options

Returns

Manual fetch example

TypeScript JSXCopy
const { data, loading, refetch } = useContent({ autoFetch: false });

// Fetch on user action
return <button onClick={refetch}>Load Config</button>;

---

useContentKey<T>(key)

Returns the value of a single key from the flat content map. Internally calls useContent(), so all entries are fetched.

TypeScript JSXCopy
import { useContentKey } from "keysetapp/react";

function HeroBanner() {
  const { value, loading, error } = useContentKey<string>("hero_title");

  if (loading) return <p>Loading…</p>;
  return <h1>{value ?? "Welcome"}</h1>;
}

Parameters

Returns

---

Typed hooks

These hooks fetch only the single key they need and return a strongly-typed value. They all follow the same { value, loading } return shape.

useKeysetString(key, defaultValue?)

TypeScript JSXCopy
import { useKeysetString } from "keysetapp/react";

function Headline() {
  const { value, loading } = useKeysetString("hero_title", "Welcome");

  return loading ? <span>…</span> : <h1>{value}</h1>;
}

Returns { value: string; loading: boolean }

---

useKeysetNumber(key, defaultValue?)

TypeScript JSXCopy
const { value: limit, loading } = useKeysetNumber("max_results", 10);

Returns { value: number; loading: boolean }

---

useKeysetBoolean(key, defaultValue?)

Ideal for feature flags.

TypeScript JSXCopy
import { useKeysetBoolean } from "keysetapp/react";

function NewDashboard() {
  const { value: isEnabled, loading } = useKeysetBoolean("new_dashboard", false);

  if (loading || !isEnabled) return <OldDashboard />;
  return <NewDashboardComponent />;
}

Returns { value: boolean; loading: boolean }

---

useKeysetJSON<T>(key, defaultValue?)

Returns a parsed, fully-typed JSON value.

TypeScript JSXCopy
interface NavLink { label: string; href: string }

const { value: links } = useKeysetJSON<NavLink[]>("nav_links", []);

Returns { value: T | null; loading: boolean }

---

useKeysetURL(key, defaultValue?)

Returns a URL string entry (type must be "url").

TypeScript JSXCopy
const { value: docsUrl } = useKeysetURL("docs_link", "https://docs.example.com");

Returns { value: string; loading: boolean }

---

useKeysetImage(key, defaultValue?)

Returns an image URL string entry (type must be "image").

TypeScript JSXCopy
const { value: logoUrl } = useKeysetImage("logo", "/logo.png");

return <img src={logoUrl} alt="Logo" />;

Returns { value: string; loading: boolean }

---

Choosing the right hook