@phyolim/react-rbac v1.1.0

react-rbac

role based access control for react apps

Demo

https://www.phyolim.dev/react-rbac

Install

npm install --save @phyolim/react-rbac

Usage

Define permissions config in context provider.

const App = () => {
  const permissions = {
    regularSettings: {
      user: ['r', 'u'],
      admin: ['r', 'u'],
    },
    advancedSettings: { user: ['r'], admin: ['u', 'r'] },
  };

  return (
    <RbacProvider permissions={permissions}>
      <ExampleRbacComponent />
    </RbacProvider>
  );
};

At the component level, you can use useRbac hook to get permissions.

export const ExampleRbacComponent = () => {
  const options = {
    undefined: <div>You have no access</div>,
    null: <div>You have no access</div>,
    [['r'].toString()]: <div>You have read only access</div>,
    [['r', 'u'].toString()]: <div>You have read and write access</div>,
  };
  const access = useRbac('admin', 'advancedSettings');

  return options[access.sort()];
};

Example from demo page:

export default function ReactRbacContainer() {
  const permissions = {
    'accounts-management': {
      'Regular User': ['r'],
      'Account Manager': ['r', 'u'],
      'Administrator': ['c', 'r', 'u', 'd'],
    },
  };
  return (
    <RbacProvider permissions={permissions}>
      <RbacDemo />
    </RbacProvider>
  );
}

const RbacComponent = () => {
  const access = useRbac('admin', "accounts-management");

  return (
    <>
      {access.includes("c") && <button type="button">Create</button>}
      <table>
        <thead>
        <tr>
          <th scope="col">Company Name</th>
          <th scope="col">
            <span className="sr-only">Edit</span>
          </th>
        </tr>
        </thead>
        <tbody>
        {companies.map((company) => (
          <tr key={company.name}>
            <td>{company.name}</td>
            <td>
              {access.includes("r") && <a href="#">View</a>}
              {access.includes("u") && <a href="#">Edit</a>}
              {access.includes("d") && <a href="#">Delete</a>}
            </td>
          </tr>
        ))}
        </tbody>
      </table>
    </>
  );
};

```

## License

MIT © [phyolim](https://github.com/phyolim)