@rakun-kit/manager-react

React manager UI and client utilities for Rakun.

Most apps use this package through framework adapters such as @rakun-kit/next/manager, but the runtime components and clients are also published for custom integrations.

Browser App

Render the manager with a manager client and navigation implementation:

import {
  ManagerBrowserApp,
  createHttpManagerClient,
} from "@rakun-kit/manager-react";
import "@rakun-kit/manager-react/styles.css";

const client = createHttpManagerClient({
  baseUrl: "/api/rakun",
});

export function ManagerPage() {
  return (
    <ManagerBrowserApp
      client={client}
      pathname={window.location.pathname}
      basePath="/backend"
    />
  );
}

ManagerBrowserApp creates browser path navigation by default. Use ManagerRuntimeApp when you need to provide custom navigation.

Clients

HTTP client:

import { createHttpManagerClient } from "@rakun-kit/manager-react/client/http";

const client = createHttpManagerClient({
  baseUrl: "/api/rakun",
});

const contentTypes = await client.request("manager.contentTypes");

tRPC client adapter:

import { createTrpcManagerClient } from "@rakun-kit/manager-react/client/trpc";

const managerClient = createTrpcManagerClient(trpcProxyClient);

Custom client:

import { createManagerClient } from "@rakun-kit/manager-react/client/request";

const client = createManagerClient(async (name, input, options) => {
  // call your transport here
});

Navigation

Use createPathManagerNavigation for router integrations:

import { createPathManagerNavigation } from "@rakun-kit/manager-react/state/navigation";

const navigation = createPathManagerNavigation({
  basePath: "/backend",
  push: (href) => router.push(href),
  replace: (href) => router.replace(href),
});

Styles

Import the package stylesheet once:

import "@rakun-kit/manager-react/styles.css";

Exports

• @rakun-kit/manager-react: manager app, providers, clients, navigation, router, layout, media, and state helpers.
• @rakun-kit/manager-react/client/http: HTTP manager client.
• @rakun-kit/manager-react/client/request: transport-agnostic manager client.
• @rakun-kit/manager-react/client/trpc: tRPC proxy client adapter.
• @rakun-kit/manager-react/app/runtime-app: ManagerRuntimeApp, ManagerBrowserApp.
• @rakun-kit/manager-react/state/navigation: navigation helpers and provider.
• @rakun-kit/manager-react/link: link component provider.
• @rakun-kit/manager-react/styles.css: bundled manager styles.

Build

bun run build --workspace @rakun-kit/manager-react