Installation

Package Manager

Install with your preferred package manager:

# npm
npm install react-access-engine

# pnpm
pnpm add react-access-engine

# yarn
yarn add react-access-engine

# bun
bun add react-access-engine

Requirements

React 18+ or 19+
TypeScript 5.0+ (recommended, but not required)

DevTools (Optional)

The DevTools overlay is a separate dev-only package to keep the core bundle small:

# npm
npm install -D react-access-engine-devtools

# pnpm
pnpm add -D react-access-engine-devtools

# yarn
yarn add -D react-access-engine-devtools

See DevTools for setup and usage.

Bundle Size

The library is tree-shakeable with zero runtime dependencies:

Package	ESM	CJS
`react-access-engine`	~23 KB	~24 KB
`react-access-engine-devtools`	~30 KB	~32 KB

Import only the hooks and components you use — unused code is eliminated by your bundler.

Framework Compatibility

Framework	Supported	Notes
React (Vite/CRA)	✅	Full support
Next.js App Router	✅	SSR-safe, all components use `'use client'`
Next.js Pages Router	✅	Full support
Remix	✅	Full support
Gatsby	✅	Full support
React Native	⚠️	Core hooks work; components need adaptation

TypeScript Setup

For the best type inference, use as const on your config arrays:

const config = defineAccess({
  roles: ["admin", "editor", "viewer"] as const,
  permissions: {
    admin: ["*"],
    editor: ["posts:read", "posts:write"],
    viewer: ["posts:read"],
  },
} as const);

// Now you get full type inference:
type Roles = InferRoles<typeof config>; // 'admin' | 'editor' | 'viewer'
type Perms = InferPermissions<typeof config>; // 'posts:read' | 'posts:write' | '*'

Next Steps

Quick Start — Build your first access-controlled app