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.