React Context driven role-access for conditional rendering of components.

npm i react-access or yarn add react-access

import RequireForAccess, {ReactAccessContext} from 'react-access';
import {MyApp, AdminMenuBar} from './my-app';

// you can hydrate these to your app however you'd like on initial page load
// or in your bundle, etc
const userPermissions = ['APPUSER', 'CREATE', 'EDIT', 'ETC'];

React.render(<ReactAccessContext userPermissions={userPermissions}>
  <RequireForAccess
    permissions={['ADMIN']}
    invalidAccessComponent={<span>You do not have admin access!</span>}
  >
    {/* This will not render for our userPermissions we've provided */}
    <AdminMenuBar/>
  </RequireForAccess>
  <MyApp>
</ReactAccessContext>, document.getElementById('react-app'));

This library is intended to help with permission based rendering of UI elements. This should really always be enforced on your service layers, and through other secure measures as well - however often it can be useful to re-use certain pages & components for varying levels of permission. For example, perhaps an admin is given CAN_DELETE_ANYTHING permissions, but users are only given CAN_VIEW and CAN_CREATE. Your menu may render an option for deleting, but only for someone with the right permission set.

This library utilizes the React context API. This can add a few considerations for use in your project:

1. React folks like to say you shouldn't use context because it can/will change and is experimental. If it breaks, updating your app to newer versions may have more things to fix than you expected.
2. Sometimes context is not the ideal solution, you're adding in extra <JSX/> which is not just a function call and may cause performance issues in really large / high performing apps. It might be easier to do something more like:

const Component = (props) => {
  return <div>
    {hasAccess(props.userPermissions) && <SecretElement/>}
  </div>;
};

This library is more concerned with solving how you pass hasAccess and userPermissions all the way down your application tree to leaf nodes.

The components used in tandem to accomplish what we're aiming for are:

1. <ReactAccessContext>, which is a context provider designed to be the single point of entry for your user data for all (or a section) of your application.
2. <RequireForAccess>, which is a component that leverages that context and determines if the contents should render.

But, I'm using it anyway. And I plan to polish it up for better, more stable production use. Feedback welcome!