react-permissible
Making the permission management for React components easier.
react-permissible
is a React Component allowing to:
- manage visibility of particular components depending on users permissions
- replace particular component when the user isn't permitted to see it
- manage accessability to particular view depending on users permissions
- fire a callback when the user isn't allowed to go to access the component/route
Why?
Currently there's no permission management in React. The existing components are either over-engineered (full ACL support etc.), or limited to role-based management. react-permissible
is simple at its core and solves only one problem. Access the Component if the permissions match, do something otherwise.
Live demo/ docs
You can access live demo/ docs at https://brainhubeu.github.io/react-permissible/.
Installation
npm i @brainhubeu/react-permissible
Usage
import { PermissibleRender } from '@brainhubeu/react-permissible';
...
render() {
return (
<PermissibleRender
userPermissions={permissions}
requiredPermissions={requiredPermissions}
>
<RestrictedComponent/>
</PermissibleRender>
);
}
Where:
-
userPermissions
is an array of permissions set for current user -
requiredPermissions
is an array of required permissions
More detailed documentation with several use cases covered is available here.
Running tests
npm test
Roadmap
- Passing a callback function as a prop for
PermissibleRender
component
License
React-permissible is copyright © 2017-2020 Brainhub It is free software, and may be redistributed under the terms specified in the license.
About
react-permissible
is maintained by @kkoscielniak, @adam-golab, @Lukasz-pluszczewski and the Brainhub development team. It is funded by Brainhub and the names and logos for Brainhub are trademarks of Brainhub Sp. z o.o.. You can check other open-source projects supported/developed by our teammates here.
We love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.