For those who like to jump straight to [code](https://github.com/gdstp/react-permissions). Live [preview](https://react-permissions.vercel.app/) Typically when it comes to permission components we all think about having an extra provider around the application, but personally I don't like having 3 to 4 extra lines every time we need a permission based component. _First things first:_ This is a walkthrough process on how to accomplish permissions level components, **it's important that you have basic knowledge in React as well as Typescript**. For sake of simplicity we will not handle anything related to server, we will be using static data. We will be using Next@14 but you should be able to accomplish the same result in any other react based framework. ## React HOC This is one of my favorites techniques to use in React, although there aren't many cases where it can be explored. The idea behind the HOC is quite similar to the Provider. We will have a wrapper to our component, and this wrapper will be validating if the user has permission. Before we dive into the code, this is an example on how our component would look like at the end ```typescript

gdstp

Permission based components with React's HOC

Join Our Newsletter. No Spam, Only the good stuff.