✨ expose validator function

Readme.md

@@ -54,3 +54,33 @@ const { permission: showComponentName, role, rulesMap, } = usePermission('compon
 ...
 {showComponentName && <div>Component available for authorized user</div>}
 ```
+### Advanced usage
+A validator function can be provided
+```javascript
+import { PermissionGateProvider } from 'permission-gate';
+...
+
+// define or get from api rules and freeze them
+const rules = Object.freeze({
+  componentName: ['admin', 'user', 'other-role'],
+  anotherComponentName: ['admin'],
+});
+
+function validator({ role, rulesMap, name }) {
+  // default validator implementation
+  const scope = rulesMap[name];
+  if (!scope) return true;
+
+  return scope.includes(role);
+}
+
+function MyApp() {
+  const role = 'user'; // get from authenticated user
+
+  return (
+    <PermissionGateProvider role={role} rulesMap={rules} validator={validator}>
+      <App />
+    </PermissionGateProvider>
+  )
+}
+```

src/index.tsx

@@ -1,8 +1,19 @@
-import React, { useContext, createContext, cloneElement, forwardRef, isValidElement, Context, Ref, ReactChild, ReactElement } from "react";
+import React, {
+  useContext,
+  createContext,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  Context,
+  Ref,
+  ReactChild,
+  ReactElement,
+} from "react";
 
 export type Rules = {
   rulesMap: { [key: string]: string[] },
   role: string,
+  validator?: ({ role, rulesMap, name }: Rules & { name: string }) => boolean,
 };
 
 const RoleContext: Context<Rules> = createContext({
@@ -35,9 +46,9 @@ const hasPermission = ({ role, rulesMap, name }: Rules & { name: string }): bool
 };
 
 export function usePermission(name: string): Rules & { granted: boolean } {
-  const { role, rulesMap }: Rules = useContext(RoleContext);
+  const { role, rulesMap, validator = hasPermission }: Rules = useContext(RoleContext);
 
-  const granted = hasPermission({ role, rulesMap, name });
+  const granted = validator({ role, rulesMap, name });
   return { granted, role, rulesMap };
 }