react-hook-use-permissions

Usage
Credits

Usage

Installation

Using npm:

$ npm install --save react-hook-use-permissions

Using yarn:

$ yarn add react-hook-use-permissions

Hooks

`hasAny`

This method checks whether one of the permissions passed as a function parameter exists in the permissions array passed in the hook

`hasAll`

This method checks whether all permissions passed as a function parameter exist in the permissions array passed in the hook

`doesNotHaveAny`

This method checks that one of the permissions passed as a function parameter do not exist in the permissions array passed in the hook

`doesNotHaveAll`

This method checks that all permissions passed as a function parameter do not exist in the permissions array passed in the hook

*In all methods, you can use a string with the permissions separated by | (pipe) or a array

import { usePermissions } from "react-hook-use-permissions";

export default function App() {
  /** Here you can use any way to instantiate permissions, for example through states using redux **/
  const permissions = ["store", "edit"];
  const { hasAny, hasAll, doesNotHaveAny, doesNotHaveAll } = usePermissions<string[]>(permissions);

  return (
    <>
      {hasAny("store|edit|remove") ? (
        <div>Have any of the permissions</div>
      ) : (
        <div>Does not have any of the permissions</div>
      )}

      {hasAll(["store", "edit", "remove"]) ? (
        <div>Has all of the permissions</div>
      ) : (
        <div>Does not have all of the permissions</div>
      )}

      {doesNotHaveAny("store|edit|remove") ? (
        <div>Does not have any of the permissions</div>
      ) : (
        <div>Has any of the permissions</div>
      )}

      {doesNotHaveAll("store|edit") ? (
        <div>Does not have all of the permissions</div>
      ) : (
        <div>Has any or all of the permissions</div>
      )}
    </>
  );
}

Usage With Redux

To use with redux the only thing that will be different is the instantiation of the hook, you will use the hook usePermissionsWithRedux, and you will have to pass as a parameter to the hook a function to be used in the redux selector, state => state.user.permissions for example.

import { usePermissionsWithRedux } from "react-hook-use-permissions";
import {RootState, UserState} from "./redux-types";

export default function App() {
  const { hasAny, hasAll, doesNotHaveAny, doesNotHaveAll } = usePermissionsWithRedux<RootState, UserState>((state) => state.user.permissions);

  return (
    <>
      {hasAny("store|edit|remove") ? (
        <div>Have any of the permissions</div>
      ) : (
        <div>Does not have any of the permissions</div>
      )}

      {hasAll(["store", "edit", "remove"]) ? (
        <div>Has all of the permissions</div>
      ) : (
        <div>Does not have all of the permissions</div>
      )}

      {doesNotHaveAny("store|edit|remove") ? (
        <div>Does not have any of the permissions</div>
      ) : (
        <div>Has any of the permissions</div>
      )}

      {doesNotHaveAll("store|edit") ? (
        <div>Does not have all of the permissions</div>
      ) : (
        <div>Has any or all of the permissions</div>
      )}
    </>
  );
}

Component

`Permission`

This is a component that uses the usePermissions or usePermissionsWithRedux hook inside itself

import { Permission } from "react-hook-use-permissions";

export default function App() {
  /** Here you can use any way to instantiate permissions, for example through states using redux **/
  const permissions = ["store", "edit"];

  return (
    <Permission
      permissions={permissions}
      doesNotHaveAny="store|edit"
      /**
       * You can also pass permissions on an array like this ['store', 'edit'] to doesNotHaveAny prop
       **/

      /**
       * You can also pass any method described above to verify permissions
       **/
    >
      {/**Put here the content you want**/}
    </Permission>
  );
}

Usage With Redux

import { Permission } from "react-hook-use-permissions";
import {RootState, UserState} from "./redux-types";

export default function App() {
  return (
    <Permission<RootState, UserState>
      selector={(state) => state.user.permissions}
      hasAny="store|edit"
      /**
       * You can also pass permissions on an array like this ['store', 'edit'] to hasAny prop
       **/

      /**
       * You can also pass any method described above to verify permissions
       **/
    >
      {/**Put here the content you want**/}
    </Permission>
  );
}

Props

Prop	Type	Description
`children`	`ReactNode`	React Node(s) to render.
`permissions`	`?string[]`	Permissions that will be used for verification inside of the component. `Required` if `selector` prop are not present
`hasAny`	`?string`\|`string[]`	Permissions to be checked by method `hasAny` present in `usePermission` or `usePermissionWithRedux`. If you pass permissions as a string, they must be separated by \| (pipe)
`hasAll`	`?string`\|`string[]`	Permissions to be checked by method `hasAll` present in `usePermission` or `usePermissionWithRedux`. If you pass permissions as a string, they must be separated by \| (pipe)
`doesNotHaveAny`	`?string`\|`string[]`	Permissions to be checked by method `doesNotHaveAny` present in `usePermission` or `usePermissionWithRedux`. If you pass permissions as a string, they must be separated by \| (pipe)
`doesNotHaveAll`	`?string`\|`string[]`	Permissions to be checked by method `doesNotHaveAll` present in `usePermission` or `usePermissionWithRedux`. If you pass permissions as a string, they must be separated by \| (pipe)
`selector`	`(state: DefaultRootState) => string[]`	Selector used by the redux to get permissions. `Required` if `permissions` prop are not present

If you do not pass any permissions on permissions property, the component will render the content as if the user has permission.

Credits

Written by Julio Cavallari (julio-cavallari).

julio-cavallari / react-hook-use-permissions Goto Github PK