kirak-react

Part of the kirak-sdk monorepo. Not using React? Use kirak directly - it works the same in any JS framework (Vue, Svelte, Angular, Next.js, plain JS) and Node.

React hooks for the kirak client - session state, the current user, and data fetching/mutations, all reacting automatically to sign in/out. One package for both web React and React Native - see React Native below.

Install

npm install kirak kirak-react

Setup

import { createClient } from "kirak";
import { KirakProvider } from "kirak-react";

const kirak = createClient("https://my-app.kirak.io");

function App() {
  return (
    <KirakProvider client={kirak}>
      <YourApp />
    </KirakProvider>
  );
}

useSession()

The current session, kept live - updates on sign in/out/refresh with no re-fetch needed.

const { session, loading } = useSession();
if (loading) return <Spinner />;
if (!session) return <SignInForm />;

useUser()

The current user, re-fetched automatically whenever the session changes.

const { user, error, loading, refetch } = useUser();

useApi()

Auto-fetching wrapper over kirak.api() - fetches on mount, and again whenever operation or the contents of params change.

const { data: posts, error, loading, refetch } = useApi<Post[]>("posts.fetch", {
  status: "published",
});

Pass { skip: true } to hold off fetching (e.g. while a required param isn't ready yet):

const { data } = useApi(`posts.fetch`, { id }, { skip: !id });

useMutation()

For a call you trigger yourself - a form submit, a button click - rather than one that runs automatically on mount.

const [createPost, { loading, error }] = useMutation<{ id: number }>("posts.create");

async function onSubmit() {
  const { data, error } = await createPost({ data: { title, body } });
}

useKirak()

The raw client from the nearest <KirakProvider>, for anything the hooks above don't cover

• e.g. calling kirak.api("auth.login", ...) directly from a form handler.

const kirak = useKirak();
await kirak.api("auth.login", { email, password });

React Native

No separate package needed - install the same kirak + kirak-react and use the same hooks. The hooks are built entirely on React's core APIs (useState, useEffect, useContext, Context.Provider), which behave identically under React Native's renderer as they do under react-dom on web - none of them touch a DOM or browser API. This has been verified directly: kirak-react's hooks are exercised in tests under react-test-renderer, React's own official non-DOM renderer that uses the same reconciler React Native attaches to.

The one platform difference is storage: web falls back to localStorage for session persistence, which does not exist in React Native. Pass AsyncStorage instead, no adapter required - its real published type signature is an exact structural match for kirak's AuthStore interface:

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "kirak";

const kirak = createClient("https://my-app.kirak.io", {
  auth: { storage: AsyncStorage },
});

This has been verified with a test using a store whose methods are genuinely async, shaped exactly like AsyncStorage's real interface (not just the synchronous in-memory store used in most other tests).

Status

Working, tested against a fake client (unit tests, no real network) and against a live backend (integration tests), including a dedicated pass proving the hooks run correctly under a non-DOM renderer for React Native. Not yet published to npm. A typed query builder on the kirak package itself is still to come; useApi/useMutation will keep working the same way once it exists, since api() stays a permanent part of kirak's surface.

License

MIT