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 user's permissions
replacing particular component when the user isn't permitted to see it
manage accessability to particular view depending on user's permissions
firing 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 it's core and solves only one problem - accessing the Component if the necessary permissions are met, do something otherwise.

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

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.

ParadiseArtist/react-permissible