React Restricted

Permission-based view restrictions for React.

Requirements

• React >= 16.8.0

Install

yarn add react-restricted react react-dom

Usage

RestrictedView component

import { RestrictedProvider, RestrictedView } from "react-restricted";

function ViewExample() {
  return (
    <RestrictedProvider permissions={["somePermission"]}>
      <RestrictedView requiredPermission="somePermission">
        <SomeComponent />
      </RestrictedView>
    </RestrictedProvider>
  );
}

RestrictedContext

import { RestrictedProvider, RestrictedConsumer } from "react-restricted";

function ContextExample() {
  return (
    <RestrictedProvider permissions={["somePermission"]}>
      <RestrictedConsumer>
        {({ hasPermission }) =>
          hasPermission("somePermission") ? <SomeComponent /> : <SomeOtherComponent />
        }
      </RestrictedConsumer>
    </RestrictedProvider>
  );
}

useRestricted hook

import { useRestricted } from "react-restricted";

function HookExample() {
  const { hasPermission } = useRestricted();

  return hasPermission("somePermission")
    ? <SomeComponent>
    : <SomeOtherComponent />
}

Contributing

Please read our guidelines.

License

See LICENSE.