React Access Area Library

Flexible & extensible modules with development friendly flexibility to maintain the forbidden areas for different types of users in ReactJS.

• Getting started
• API

npm install --save @tam11a/react-use-access

First, you need to wrap the application or private layouts with <AccessProvider> then you are ready to use <AccessMargin> and other modules.

const App = () => {
  const permissions = ["PRODUCT_VIEW", "PRODUCT_EDIT", "PRODUCT_DELETE"];

  return (
    <AccessProvider permissions={permissions}>
      <YourApplicationRoutes />
    </AccessProvider>
  );
};

Protect UI Component

const Product = () => {
  return (
    <AccessMargin to="PRODUCT_DELETE">
      <button>Product Delete</button>
    </AccessMargin>
  );
};

Protect UI Component with multiple permissions

const Product = ({ product }) => {
  return (
    <>
      <AccessMargin to={["PRODUCT_EDIT", "PRODUCT_VIEW"]}>
        <p>Product Name: {product.name}</p>
        <AccessMargin to="PRODUCT_EDIT">
          <button>Product Delete</button>
        </AccessMargin>
        <AccessMargin to="PRODUCT_DELETE">
          <button>Product Delete</button>
        </AccessMargin>
      </AccessMargin>
    </>
  );
};

Conditional render with useAccessContext from Context API

const { checkAccess } = useAccessContext();

console.log(checkAccess("PRODUCT_EDIT"));

return <>{checkAccess("PRODUCT_EDIT") && <button>"Edit Product"</button>}</>;

• checkAccess
• useAccessContext
• AccessMargin
• AccessProvider
• DefaultFallback

Function to check if passed string or list of strings have permission.

permission - string | string[]

Permission or Permission List to check for restriction

permissions - string | string[]

Current Permission List

checkAccess - The checkAccess Function

addPermissions - function to add new permissions with existing permissions

const { addPermissions } = useAccessContext();

addPermissions("PRODUCT_UPDATE");
// or
addPermissions(["PRODUCT_UPDATE", "VIEW_PRODUCT_STATES"]);

resetPermissions - function to reset permissions with passed permissions or to default permissions the provider initialized with.

const { resetPermissions } = useAccessContext();

resetPermissions(); // to reset default
// or
resetPermissions(["PRODUCT_UPDATE", "VIEW_PRODUCT_STATES"]); // to set only these permissions

removePermissions - function to add remove permission/permissions from existing permissions

const { removePermissions } = useAccessContext();

removePermissions("PRODUCT_UPDATE");
// or
removePermissions(["PRODUCT_UPDATE", "VIEW_PRODUCT_STATES"]);

defaultFallback - React.ReactNode

The fallback component.

Wrapper to restrict areas or components.

to - string | string[]

Permission or Permission List for the Margin to check the wrapped areas restriction

defaultFallback - boolean

To call the default fallback if the area is restricted

fallback - React.ReactNode

To add customised fallback if the area is restricted

Context Provider for the Context the entire module is using. you need to wrap the application or private layouts with <AccessProvider> to use other modules.

permissions - string | string[]

Default Permission or Permission List

fallback - React.ReactNode

To set customised fallback for the default fallback view when the defaultFallback is called in <AccessMargin>, <DefaultFallback /> and on other necessities.

The default fallback component.

N/A © tam11a