react-access-boundary

A simple component to check the user has permission to access wrapped UI components or not.

Quick Start

1. Installation: It should be installed on your react project dependencies by running either of the following:

yarn add react-access-boundary
# or
npm i react-access-boundary

2. Usage: First, you need to wrap the application or private layouts with <AccessProvider> then you are ready to use this <AccessBoundary>

const App = () => {
  const permissions = ['MY_ACCOUNT', 'ORDER_VIEW', 'ORDER_EDIT', 'ORDER_UPDATE', 'ORDER_DELETE'];

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

Protect page

const CustomerOrders = () => {
  return (
    <AccessBoundary to="ORDER_VIEW" isDefaultFallback>
      // Your Customer Order component
    </AccessBoundary>
  );
};

export default CustomerOrders;

Protect UI component

<AccessBoundary to="ORDER_DELETE">
  <button class="ActionButton">Delete Order</button>
</AccessBoundary>

Conditional render with useContext

const { isAllowedTo } = useAccessContext();

<button class="ActionButton">{isAllowedTo('ORDER_UPDATE') ? 'Update Order' : 'Preview Order'}</button>;

Can I contribute?

Sure, open an issue, point out errors, and what not. Wanna fix something yourselves, you're welcome to open a PR and I appreciate it.

License

MIT