React Example

Purpose

examples/react is the main non-Next React example. It demonstrates data-aware permissions where the answer depends on the current record, not just on the action name.

What it demonstrates

React integration with PermixProvider and usePermix
permission predicates that inspect the checked object
asynchronous setup after the current user becomes available
Check component usage next to imperative check(...)

Core idea

The edit permission depends on the current post:

lib/permix.ts

edit: post => post?.authorId === user.id,

That lets the same user edit some posts but not others, while keeping the check strongly typed.

Run it

cd examples/react
pnpm dev

Key files

src/lib/permix.ts: typed React Permix instance and Check component
src/hooks/permissions.ts: local hook wrapper
src/App.tsx: per-post checks and conditional rendering

When to use it

Use this example when you need object-aware React checks outside Next.js. If you are using App Router, prefer the dedicated Next.js integration guide and the Next examples.

Source code

Browse the example on GitHub