A simple component to check the user has permission to access wrapped UI components or not.
- Installation: It should be installed on your react project
dependenciesby running either of the following:
yarn add react-access-boundary
# or
npm i react-access-boundary
- 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>;
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.