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