React

Overview

Permix provides official React integration through the PermixProvider component and usePermix hook. This allows you to manage permissions reactively in your React app.

Before getting started with React integration, make sure you've completed the initial setup steps in the Quick Start guide.

Setup

First, wrap your application with the PermixProvider:

App.tsx

import { PermixProvider } from 'permix/react'
import { permix } from './lib/permix'
 
function App() {
  return (
    <PermixProvider permix={permix}>
      <YourApp />
    </PermixProvider>
  )
}

Remember to always pass the same Permix instance to both the PermixProvider and usePermix hook to maintain type safety.

Hook

For checking permissions in your components, you can use the usePermix hook. And to avoid importing the hook and Permix instance in every component, you can create a custom hook:

hooks/use-permissions.ts

import { usePermix } from 'permix/react'
import { permix } from '../lib/permix'
 
export function usePermissions() {
  return usePermix(permix)
}

Components

If you prefer using components, you can import the createComponents function from permix/react and create checking components:

lib/permix.ts

import { createComponents } from 'permix/react'
 
// ...
 
export const { Check } = createComponents(permix)

And then you can use the Check component in your components:

page.tsx

export default function Page() {
  return (
    <Check
      entity="entity"
      action="action"
      data={data}
      otherwise={<p>Will show this if a user doesn't have permission</p>} // Will show this if a user doesn't have permission
      reverse // Will flip the logic of the permission check
    >
      Will show this if a user has permission
    </Check>
  )
}

Usage

Use the usePermix hook and checking components in your components: