@layers/amba-react

@layers/amba-react

React hooks for amba. Companion to @layers/amba-web.

Install

pnpm add @layers/amba-react @layers/amba-web react

Quickstart

import { Amba } from "@layers/amba-web";
import {
  AmbaProvider,
  useUser,
  useCollection,
  useFlag,
} from "@layers/amba-react";

// Configure at app start (before render)
await Amba.configure({ apiKey: import.meta.env.VITE_AMBA_API_KEY });

function App() {
  return (
    <AmbaProvider>
      <Inner />
    </AmbaProvider>
  );
}

function Inner() {
  const { user, isAuthenticated } = useUser();
  const { data: todos, loading } = useCollection<{ id: string; title: string }>(
    "todos",
  );
  const newUi = useFlag("new_ui");

  if (!isAuthenticated) return <SignIn />;
  if (loading) return <Spinner />;
  return (
    <div className={newUi ? "new-ui" : "classic"}>
      <p>Welcome {user?.display_name}</p>
      <ul>
        {todos?.map((t) => (
          <li key={t.id}>{t.title}</li>
        ))}
      </ul>
    </div>
  );
}

Hooks

Hook	Returns
useAmba()	Raw SDK handle.
useUser()	{ user, isAuthenticated, loading }.
useCollection(name, options)	{ data, loading, error, refetch, response }.
useFlag(name)	boolean.
useVariant(name)	string | null (multi-variant flag assignment).
useEntitlement(name)	boolean — true if user has the entitlement.
useTrackOnMount(event, props)	Side-effect — tracks an event when the component mounts.

License

MIT.