React

This package provides React bindings on top of the RBAC core engine and lets you control:

npm install @rbac-ui/react
# or
yarn add @rbac-ui/react
# or
pnpm add @rbac-ui/react

1) Wrap your app with <AccessProvider />:

import { AccessProvider } from "@rbac-ui/react";

const roles = ["ui:dashboard", "!ui:dashboard:checklist", "ui:settings"];

export function App() {
  return (
    <AccessProvider roles={roles}>
      <YourApp />
    </AccessProvider>
  );
}

2) Use permissions anywhere:

import { useAccess } from "@rbac-ui/react";

const Dashboard = () => {
  const { hasAccess } = useAccess();

  return (
    <>
      {hasAccess("ui:dashboard") && <DashboardUI />}
      {hasAccess("ui:dashboard:checklist") && <Checklist />}
    </>
  );
};

Creates and provides the RBAC instance to your React app.

<AccessProvider roles={Array<string>}>{children}</AccessProvider>

Low-level hook that exposes the RBAC engine.

const { hasAccess } = useAccess();

hasAccess(resource: string): boolean

Optimized helper that returns a boolean directly.

const allowed = useHasAccess("ui:dashboard");

Batch permission checker.

const allowed = useAccessList(["ui:dashboard", "ui:settings"], "all");

Declarative UI gating component.

<AccessGate resource="ui:dashboard" fallback={<NoAccess />}>
  <Dashboard />
</AccessGate>

<AccessGate resource={["post:edit", "post:delete"]} mode="any">
  <ActionButtons />
</AccessGate>

Higher Order Component for access-protected components.

function Dashboard(props: {}) {
  return <div>Dashboard</div>;
}

export default withAccess(Dashboard, "ui:dashboard:view");

export const ProtectedDashboard = withAccess(Dashboard, "ui:dashboard:view", {
  fallback: <p>You do not have access to the dashboard.</p>,
});

function AdminPanel() {
  return <div>Admin Panel</div>;
}

export default withAccess(AdminPanel, ["ui:admin:view", "ui:admin:edit"], {
  mode: "all",
  fallback: <p>Admins only.</p>,
});

Protects functions and handlers, not just UI.

const guard = useGuard();

const deleteUser = guard("user:delete", async (id) => api.deleteUser(id), {
  onAllow: () => console.log("Allowed"),
  onDeny: () => toast.error("Not allowed"),
});