{"id":27148179,"url":"https://github.com/dias1c/casbin-react","last_synced_at":"2026-02-17T02:02:26.990Z","repository":{"id":281250173,"uuid":"944319215","full_name":"Dias1c/casbin-react","owner":"Dias1c","description":"🔐 Simple library that supports access control models like ACL, RBAC, ABAC for React Application","archived":false,"fork":false,"pushed_at":"2025-03-14T06:15:02.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T19:41:23.120Z","etag":null,"topics":["abac","acl","auth","authorization","authorizer","authz","casbin","casbin-frontend","casbin-js","casbin-react","permissions","rbac"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@diaskappassov/casbin-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dias1c.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOGS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-07T06:25:23.000Z","updated_at":"2025-03-23T15:27:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"aada385e-f1aa-4c1e-9743-1f7e3e3c723b","html_url":"https://github.com/Dias1c/casbin-react","commit_stats":null,"previous_names":["dias1c/casbin-react"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Dias1c/casbin-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dias1c%2Fcasbin-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dias1c%2Fcasbin-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dias1c%2Fcasbin-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dias1c%2Fcasbin-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dias1c","download_url":"https://codeload.github.com/Dias1c/casbin-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dias1c%2Fcasbin-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29530155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T00:57:22.232Z","status":"online","status_checked_at":"2026-02-17T02:00:08.105Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abac","acl","auth","authorization","authorizer","authz","casbin","casbin-frontend","casbin-js","casbin-react","permissions","rbac"],"created_at":"2025-04-08T11:53:05.981Z","updated_at":"2026-02-17T02:02:26.986Z","avatar_url":"https://github.com/Dias1c.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# casbin-react\n\n🔐 Simple library that supports access control models like ACL, RBAC, ABAC for React Application.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ts\" src=\"https://badgen.net/badge/-/TypeScript?icon=typescript\u0026label\u0026labelColor=blue\u0026color=555555\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@diaskappassov/casbin-react\"\u003e\n    \u003cimg alt=\"NPM package version\" src=\"https://img.shields.io/npm/v/@diaskappassov/casbin-react\"/\u003e\n    \u003cimg alt=\"NPM package downloads count\" src=\"https://img.shields.io/npm/dy/@diaskappassov/casbin-react?label=Downloads\u0026logo=npm\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Dias1c/casbin-react/\"\u003e\n    \u003cimg alt=\"Visit package GitHub page\" src=\"https://img.shields.io/github/stars/Dias1c/casbin-react?style=social\u0026label=GitHub\u0026maxAge=2592000\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [!NOTE]\n\u003e\n\u003e - Changelogs [here](./CHANGELOGS.md).\n\u003e - Read more about casbin [here](https://casbin.org/docs/overview).\n\n## Installation\n\n```sh\nnpm i @diaskappassov/casbin-react\n```\n\n## Usage\n\n\u003c!-- TODO: in examples directory --\u003e\n\nYou can see all usage examples bellow\n\n### Generate hooks/components\n\n```tsx\nimport { createPermissionsScope } from \"@diaskappassov/casbin-react\";\n\nfunction getAuth() {\n  return {\n    m: `\n# Request definition\n[request_definition]\n# Can subject, do_action, on_object\nr = sub, act, obj\n\n# Policy definition\n[policy_definition]\np = sub, act, obj\n\n# Role definition\n[role_definition]\ng = _, _\n\n# Policy effect\n[policy_effect]\ne = some(where (p.eft == allow))\n\n# Matchers\n[matchers]\nm = g(r.sub, p.sub) \u0026\u0026 r.obj == p.obj \u0026\u0026 r.act == p.act\n`,\n    p: [\n      [\"p\", \"cat\", \"walk\", \"ground\"],\n      [\"p\", \"cat\", \"run\", \"ground\"],\n      [\"p\", \"cat\", \"swim\", \"water\"],\n      [\"p\", \"cat\", \"breathe\", \"air\"],\n    ],\n  };\n}\n\nexport const {\n  PermissionsCan,\n  PermissionsCanAll,\n  PermissionsCanAny,\n  authorizer,\n  loadPermissions,\n  useActionPermissionsInit,\n  useActionPermissionsReset,\n  usePermissionsCan,\n  usePermissionsCanAll,\n  usePermissionsCanAny,\n} = createPermissionsScope({\n  get: getAuthzPermissions,\n});\n```\n\n### PermissionsCan\n\nUse wrapper component\n\n```tsx\nexport function App() {\n  return (\n    \u003c\u003e\n      {/* Wrap children */}\n      \u003cPermissionsCan\n        rvals={[\"cat\", \"run\", \"ground\"]}\n        childrenOnLoading={\"Loading...\"}\n        childrenOnUnavailable={\"No cat can't do it :(\"}\n        childrenOnUndefined={\"Sorry, cant recognize\"}\n        onError={(err) =\u003e {\n          console.error(\"PermissionsCan: something wen'Øt wrong\", err);\n        }}\n      \u003e\n        Yes cat can run on the ground\n      \u003c/PermissionsCan\u003e\n\n      {/* Or */}\n      {/* Use render props pattern */}\n      \u003cPermissionsCan\n        rvals={[\"cat\", \"run\", \"ground\"]}\n        render={({ available, loading }) =\u003e {\n          if (loading) return \"Loading...\";\n          if (available === true) return \"YES\";\n          if (available === false) return \"NO\";\n          return \"I DONT KNOW\";\n        }}\n        onError={(err) =\u003e {\n          console.error(\"PermissionsCan: something went wrong\", err);\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nUse hook\n\n```tsx\nexport function App() {\n  const { available, loading } = usePermissionsCan({\n    rvals: [\"cat\", \"run\", \"ground\"],\n  });\n\n  if (loading) return \"Loading...\";\n  if (available === true) return \"YES\";\n  if (available === false) return \"NO\";\n  return \"I DONT KNOW\";\n}\n```\n\n## TODO\n\n- [ ] Examples\n- [ ] Documentation\n- [ ] Test\n- [ ] Release v1.0.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdias1c%2Fcasbin-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdias1c%2Fcasbin-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdias1c%2Fcasbin-react/lists"}