https://github.com/tam11a/react-use-access
Flexible & extensible modules with development friendly flexibility to maintain the forbidden areas for different types of users in ReactJS.
https://github.com/tam11a/react-use-access
access access-bounary access-control acl reactjs reactjs-library typescript-library use-access
Last synced: 29 days ago
JSON representation
Flexible & extensible modules with development friendly flexibility to maintain the forbidden areas for different types of users in ReactJS.
- Host: GitHub
- URL: https://github.com/tam11a/react-use-access
- Owner: tam11a
- License: mit
- Created: 2022-12-13T01:19:15.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T17:06:53.000Z (over 3 years ago)
- Last Synced: 2025-10-19T04:03:28.039Z (5 months ago)
- Topics: access, access-bounary, access-control, acl, reactjs, reactjs-library, typescript-library, use-access
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@tam11a/react-use-access
- Size: 249 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-access
React Access Area Library
[](https://www.npmjs.com/package/@tam11a/react-use-access) [](https://www.npmjs.com/package/@tam11a/react-use-access) [](https://standardjs.com)
Flexible & extensible modules with development friendly flexibility to maintain the forbidden areas for different types of users in ReactJS.
## Table of contents
- [Getting started](#getting-started)
- [API](#api)
## Getting started
### Installation
```bash
npm install --save @tam11a/react-use-access
```
### Quick Start
First, you need to wrap the application or private layouts with `` then you are ready to use `` and other modules.
```jsx
const App = () => {
const permissions = ["PRODUCT_VIEW", "PRODUCT_EDIT", "PRODUCT_DELETE"];
return (
);
};
```
Protect UI Component
```jsx
const Product = () => {
return (
Product Delete
);
};
```
Protect UI Component with multiple permissions
```jsx
const Product = ({ product }) => {
return (
<>
Product Name: {product.name}
Product Delete
Product Delete
>
);
};
```
Conditional render with useAccessContext from Context API
```jsx
const { checkAccess } = useAccessContext();
console.log(checkAccess("PRODUCT_EDIT"));
return <>{checkAccess("PRODUCT_EDIT") && "Edit Product"}>;
```
## API
- [checkAccess](#checkAccess)
- [useAccessContext](#useAccessContext)
- [AccessMargin](#AccessMargin)
- [AccessProvider](#AccessProvider)
- [DefaultFallback](#DefaultFallback)
## checkAccess
Function to check if passed string or list of strings have permission.
### Arguments:
`permission` - `string | string[]`
Permission or Permission List to check for restriction
### Returns: `boolean`
#
## useAccessContext
### Returns:
`permissions` - `string | string[]`
Current Permission List
`checkAccess` - The [checkAccess](#checkaccess) Function
`addPermissions` - `function` to add new permissions with existing permissions
```jsx
const { addPermissions } = useAccessContext();
addPermissions("PRODUCT_UPDATE");
// or
addPermissions(["PRODUCT_UPDATE", "VIEW_PRODUCT_STATES"]);
```
`resetPermissions` - `function` to reset permissions with passed permissions or to default permissions the provider initialized with.
```jsx
const { resetPermissions } = useAccessContext();
resetPermissions(); // to reset default
// or
resetPermissions(["PRODUCT_UPDATE", "VIEW_PRODUCT_STATES"]); // to set only these permissions
```
`removePermissions` - `function` to add remove permission/permissions from existing permissions
```jsx
const { removePermissions } = useAccessContext();
removePermissions("PRODUCT_UPDATE");
// or
removePermissions(["PRODUCT_UPDATE", "VIEW_PRODUCT_STATES"]);
```
`defaultFallback` - `React.ReactNode`
The fallback component.
#
## AccessMargin
Wrapper to restrict areas or components.
### Props:
`to` - `string | string[]`
Permission or Permission List for the Margin to check the wrapped areas restriction
`defaultFallback` - `boolean`
To call the default fallback if the area is restricted
`fallback` - `React.ReactNode`
To add customised fallback if the area is restricted
#
## AccessProvider
Context Provider for the Context the entire module is using. you need to wrap the application or private layouts with `` to use other modules.
### Props:
`permissions` - `string | string[]`
Default Permission or Permission List
`fallback` - `React.ReactNode`
To set customised fallback for the default fallback view when the defaultFallback is called in ``, `` and on other necessities.
#
## DefaultFallback
The default fallback component.
#
### License
N/A © [tam11a](https://github.com/tam11a)