Higher Order Components(HOC)

GitHub: https://github.com/RamMohan222/react-hoc-utils

Sometimes we need some special Higher-Order Components or functions to compose the components with the dynamic or static properties. for that always we don’t need to depend on some other third-party packages we can build our own package with 2 to 5 lines of code and it will make our life easy. Here I have given some common useful higher-order components source code with a suitable example lets check them and start building your own library to your project.

1. withProps:
There is a situation we need to export our component with some external properties such a situation we can use the withProps this will wrap the component with whatever the properties we are passing through it.

Example:

Exporting the App component with external properties.

While rendering a component we can pass the props from parent to child component dynamically, But there is a situation we need to pass component itself as a property and it should wrap with some additional properties in that scenario we can use withProps to wrap the component with dynamic properties.

The normal way of passing props from parent to children.

<Component title="Title" action={()=>console.log("Some Action")} />

From the below example we are passing the Cell Component as property and it is wrapping with some additional properties with the help of withProps.

2. withContextProps:

In ReactJs recent release >=16.8 we can use more than one context by using useContext hook in functional components. But in class based components it is difficult to use more than one context. By using withContextProps HOC we can wrap more than one context with our component. It will convert all context props into component props. see the below code snippet for withContextProps HOC and it’s usage.

Example:

3. composeHOC
The below snippet is the source code for composeHOC.

It will compose more than on HOC’s into single HOC

Sometimes we need to wrap our component with more than one HOC's. The below code shows the App component is wrapping with more than one HOC and the same wrapping logic may be required in more than one component in our project. If we do in all places it's breaking the DRY principle and it looks odd too.

The App component wrapping with more than one HOC’s

Instead of writing the same logic, again and again, we can create a new reusable component by wrapping the common components with the help of composeHOC. check the below code for example.

Creates the new Reusable Higher Order Component by composing the common HOC’s.

Thanks to all.

--

--

--

Love to code in Java| NodeJs | ReactJs and my new girlfriend is Python https://ram222mohan.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top Crazy Termux Commands By Using Termux App

Testing Async Redux Actions with Jest

Migrating an NPM package to use ES Modules

TIL/2020–12–16

How to Make an Animated Progress Bar in CSS

How to Make an Animated Progress Bar in CSS

Securing Node services using Client Authenticated TLS with CATKeys

Reactdroid — Reactive MVI Architecture for Android — Part 3

Let’s create a website with Next.js, Antd and deploy with Now.sh

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ram Mohan

Ram Mohan

Love to code in Java| NodeJs | ReactJs and my new girlfriend is Python https://ram222mohan.com/

More from Medium

What are Hooks in React?

Understanding Controlled Forms in React

Auto consume DOM events in a react component

Creating a Controlled Form in React

Cartoon guy carrying a CTRL key, caption is “taking control”