Reusable React Permission HOC

I wanted to share a design pattern I use to manage what certain users can or cannot see inside the React applications I build.

You might find this useful if your application needs to manage what users can see based on some setting in their account.

The example I'm going to show has several different components working together:

1. React for the UI component library
2. Typescript for type safety
3. Redux for global state management
4. Bitmask for users permissions

To start, let's say you have a simple component with some text that you want to show or hide based on a users permission:

simple version

A simple way to do this would be to check a users permission level on a case by case basis.

Note: in the examples below I use the bitwise AND operator (&) to check my permission. The operation will produce either 1 or 0. Substitute your own check if your permissions model is different.

updated version

This example works, but as the application grows, always having to get the users status can add to the complexity of the page.

To solve this for myself, I created a Higher Order Component that wraps each block of sensitive information and requires one argument for the permission to check against. The component handles the status check and the show / hide logic.

Note: This example works best if you are using some kind of global state provider in your application.

permission wrapper

Now I can wrap any sensitive information with this component and supply the relevant permission to check against.

final view