https://github.com/sonjoydatta/react-access-boundary
🔐 A library for validating user permissions from UI layers and will show default unauthorised fallback if needed.
https://github.com/sonjoydatta/react-access-boundary
authorization react rollup typescript user-permission
Last synced: 4 months ago
JSON representation
🔐 A library for validating user permissions from UI layers and will show default unauthorised fallback if needed.
- Host: GitHub
- URL: https://github.com/sonjoydatta/react-access-boundary
- Owner: sonjoydatta
- License: mit
- Created: 2021-11-14T18:06:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-15T16:52:48.000Z (over 4 years ago)
- Last Synced: 2025-10-28T13:33:45.360Z (8 months ago)
- Topics: authorization, react, rollup, typescript, user-permission
- Language: TypeScript
- Homepage:
- Size: 62.5 KB
- Stars: 5
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-access-boundary
A simple component to check the user has permission to access wrapped UI components or not.
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
## Quick Start
1. Installation: It should be installed on your react project `dependencies` by running either of the following:
```
yarn add react-access-boundary
# or
npm i react-access-boundary
```
2. Usage: First, you need to wrap the application or private layouts with `` then you are ready to use this ``
```jsx
const App = () => {
const permissions = ['MY_ACCOUNT', 'ORDER_VIEW', 'ORDER_EDIT', 'ORDER_UPDATE', 'ORDER_DELETE'];
return (
);
};
```
Protect page
```jsx
const CustomerOrders = () => {
return (
// Your Customer Order component
);
};
export default CustomerOrders;
```
Protect UI component
```jsx
Delete Order
```
Conditional render with useContext
```jsx
const { isAllowedTo } = useAccessContext();
{isAllowedTo('ORDER_UPDATE') ? 'Update Order' : 'Preview Order'};
```
## Can I contribute?
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.
## License
[MIT][license]
[npm]: https://www.npmjs.com
[node]: https://nodejs.org
[package]: https://www.npmjs.com/package/react-access-boundary
[version-badge]: https://img.shields.io/npm/v/react-access-boundary?style=flat-square
[license-badge]: https://img.shields.io/npm/l/react-access-boundary?style=flat-square
[license]: https://github.com/sonjoydatta/react-access-boundary/blob/main/LICENSE