Simple HOC in React

#react #webdev #tutorial

Higher Order Components allow for reusability of code and saves you from repeating yourself, it comes in quite handy. It is something that recently came to my attention and I only wish I had learnt this earlier.

In this instance, I had a layout that consisted of a top nav embedded with a drawer that appeared in multiple views but not all, so instead of always importing it I made it a HOC like this:

import React from 'react'
import TopNav from '../components/TopNav'

export const WithLayout = (Component)  => {
    return (props) => (
        <div>
            <TopNav/>
            <Component {...props}/>
        </div>
    )
}

So what this allows you to do is wrap any component you want to have a top nav in this Layout component, just like this:

import React from 'react'
import { WithLayout } from '../HOC/Layout'

const Landing = () => {
    return (
        <div>
            <p>This a page that uses the layout HOC </p>
        </div>
    )
}

export default WithLayout(Landing)

And with that, you have a functional HOC in your react app.