react-hook-use-permissions v2.0.0

react-hook-use-permissions

Table of contents

1. Usage
   1. Installation
   2. Hooks
   3. Component
2. 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

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).