# @synzhang/react-permission

> A Permission component for React.

Latest version **0.0.13** (published 2022-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @synzhang/react-permission
pnpm add @synzhang/react-permission
yarn add @synzhang/react-permission
bun add @synzhang/react-permission
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2022-04-15 |
| First published | 2022-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 198.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Syn Zhang |
| Maintainers | synzhang |
| Keywords | react, permission |

## Links

- npm: https://www.npmjs.com/package/@synzhang/react-permission
- Repository: https://github.com/synzhang/react-permission
- Homepage: https://github.com/synzhang/react-permission#readme
- Issues: https://github.com/synzhang/react-permission/issues
- npm.io page: https://npm.io/package/@synzhang/react-permission

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.8.0 || ^17.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.21.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.13 (latest) — 2022-04-15
- 0.0.12 — 2022-04-11
- 0.0.11 — 2022-03-18
- 0.0.10 — 2022-03-15
- 0.0.9 — 2022-03-06
- 0.0.8 — 2022-03-06
- 0.0.7 — 2022-03-06
- 0.0.4 — 2022-03-05
- 0.0.1 — 2022-02-18

## README

# React Permission

A Permission component for React.

## Installation

```
npm install @synzhang/react-permission
```

## Quick Start

```js
export const ROLES = ["ADMIN", "USER"];
export const POLICIES = {
  "item:delete": (item, user) => {
    if (user.role === "ADMIN") {
      return true;
    }

    if (user.role === "USER" && item.userId === user.id) {
      return true;
    }

    return false;
  },
};
```

```js
<PermissionProvider currentUser={currentUser} roles={ROLES} policies={POLICIES}>
  <App />
</PermissionProvider>
```

### Role based access control

```js
<Permission allowedRoles={["ADMIN"]}>{"Sensitive Content"}</Permission>
```

### Permission based access control

```js
import POLICIES from "policies";

<Permission policyCheck={POLICIES["item:delete"](item, user)}>
  {"Sensitive Operation"}
</Permission>;
```

## API

### PermissionProvider

| Property    | Type   | Default | Description         |
| ----------- | ------ | ------- | ------------------- |
| currentUser | object | null    | Current user object |
| roles       | array  | []      | Roles               |
| policies    | object | {}      | Policies            |

### Permission

| Property          | Type            | Default | Description                  |
| ----------------- | --------------- | ------- | ---------------------------- |
| policyCheck       | function        | null    | Policy check function        |
| allowedRoles      | array           | []      | Allowed roles                |
| forbiddenFallback | React.Component | null    | Forbidden fallback component |
| children          | React.Component | null    | Children component           |

## License

[MIT](https://choosealicense.com/licenses/mit/)

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