{"id":24494705,"url":"https://github.com/bwca/package_merry-solutions_check-permissions","last_synced_at":"2026-05-17T10:37:29.870Z","repository":{"id":105090079,"uuid":"423079955","full_name":"Bwca/package_merry-solutions_check-permissions","owner":"Bwca","description":"react-check-permissions is a simple package for checking user permissions in a React frontend application. It provides a hook and a wrapper for conditional component rendering.","archived":false,"fork":false,"pushed_at":"2021-11-02T04:24:57.000Z","size":16,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-21T20:16:43.033Z","etag":null,"topics":["permissions","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bwca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-10-31T07:16:56.000Z","updated_at":"2023-07-04T19:22:28.000Z","dependencies_parsed_at":"2023-07-18T01:22:00.623Z","dependency_job_id":null,"html_url":"https://github.com/Bwca/package_merry-solutions_check-permissions","commit_stats":null,"previous_names":["bwca/merry-solutions__check_permissions"],"tags_count":0,"template":false,"template_full_name":"Bwca/template_ts-repo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_merry-solutions_check-permissions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_merry-solutions_check-permissions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_merry-solutions_check-permissions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_merry-solutions_check-permissions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bwca","download_url":"https://codeload.github.com/Bwca/package_merry-solutions_check-permissions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243685528,"owners_count":20330980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["permissions","react"],"created_at":"2025-01-21T20:16:55.564Z","updated_at":"2026-05-17T10:37:29.823Z","avatar_url":"https://github.com/Bwca.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-check-permissions\n\n## Well, what is it?\n\n**react-check-permissions** is a simple package for checking user permissions in a React frontend application. It provides a hook and a wrapper for conditional component rendering.\n\n## How to use it\n\nInstall with the package manager of your choice:\n\n```bash\nnpm i @merry-solutions/react-check-permissions\n```\n\nor\n\n```bash\nyarn add @merry-solutions/react-check-permissions\n```\n\nCreate a file to export permission checkers, provided by this package, i.e. `permission-checkers.ts`.\n\nImport factory function `createPermissionCheckers` from `@merry-solutions/react-check-permissions` and generate the hook and wrapper component to export and use in your application. The only argument it expects is a function for obtaining current user rights with `() =\u003e string[]` signature.\n\nFor example, let's imagine you are storing user profile in redux, with userProfile reducer:\n\n```typescript\n// ./store.ts\nimport { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';\nimport { configureStore } from '@reduxjs/toolkit';\n\nexport const store = configureStore({\n  reducer: {\n    userProfile: (state, action) =\u003e ({\n      name: 'Bob',\n      permissions: ['THE_ONLY_PERMISSION_I_HAVE'],\n    }),\n  },\n});\n\nexport type RootState = ReturnType\u003ctypeof store.getState\u003e;\nexport type AppDispatch = typeof store.dispatch;\nexport const useAppDispatch = () =\u003e useDispatch\u003cAppDispatch\u003e();\nexport const useAppSelector: TypedUseSelectorHook\u003cRootState\u003e = useSelector;\n```\n\nGenerating permission checkers in this case would involve using useSelector, to get the slice with user permissions:\n\n```typescript\n// ./permission-checkers.ts\nimport { createPermissionCheckers } from '@merry-solutions/react-check-permissions';\nimport { useAppSelector } from './store';\n\nexport const { useCheckPermissions, WithPermissions } = createPermissionCheckers(() =\u003e\n  useAppSelector(({ userProfile }) =\u003e userProfile.permissions)\n);\n```\n\nOnce you have generated `useCheckPermissions` and `WithPermissions`, they can be used anywhere in the application.\n\n### Using the hook to check permissions\n\nThe `checkPermissions` method the hook provides expects a permission or an array of permissions to check and a boolean flag `checkAll`, which denotes if all permissions to be checked are required to be present in the available permissions or not.\nUse it in your components when you need to check permissions to take decisions.\n\n```typescript\nconst { checkPermissions } = useCheckPermissions();\nconsole.log(checkPermissions('THE_ONLY_PERMISSION_I_HAVE'));\n// true, since its the only permission Bob has\n```\n\n### Using the wrapper component for conditional rendering\n\n`WithPermissions` is a component that displays or hides ~~yo kids hide yo wife~~ children based on the permission check (which it performs under the hood discreetly using the same `useCheckPermissions` hook). It accepts same parameters as the hook does, with one additional being a placeholder to show in cases the user has no right to view the children.\n\n```typescript\n\u003cWithPermissions permissions={['THE_PERMISSION_BOB_DOESNT_HAVE']} placeholder={\u003cp\u003eGo away or something.\u003c/p\u003e}\u003e\n  \u003cp\u003eLearn super secret stuff\u003c/p\u003e\n\u003c/WithPermissions\u003e;\n{\n  /* And of course Bob's going to take a hike. */\n}\n```\n\nThat's it, plain and simple :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbwca%2Fpackage_merry-solutions_check-permissions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbwca%2Fpackage_merry-solutions_check-permissions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbwca%2Fpackage_merry-solutions_check-permissions/lists"}