# @phyolim/react-rbac

> role based access control hook

Latest version **1.1.0** (published 2022-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @phyolim/react-rbac
pnpm add @phyolim/react-rbac
yarn add @phyolim/react-rbac
bun add @phyolim/react-rbac
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-02-11 |
| First published | 2022-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | phyolim |
| Maintainers | phyolim |

## Links

- npm: https://www.npmjs.com/package/@phyolim/react-rbac
- Repository: https://github.com/phyolim/react-rbac
- npm.io page: https://npm.io/package/@phyolim/react-rbac

## Recent versions

- 1.1.0 (latest) — 2022-02-11
- 1.0.2 — 2022-02-06
- 1.0.1 — 2022-02-04
- 1.0.0 — 2022-02-04

## README

# react-rbac

> role based access control for react apps

[![NPM](https://img.shields.io/npm/v/@phyolim/react-rbac.svg)](https://www.npmjs.com/package/@phyolim/react-rbac) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## [Demo](https://www.phyolim.dev/react-rbac)

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

## Install

```bash
npm install --save @phyolim/react-rbac
```

## Usage

Define permissions config in context provider.

```tsx
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.

```tsx
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:

````tsx
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)
````

---
_Source: https://npm.io/package/@phyolim/react-rbac · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._