Skip to content

Instantly share code, notes, and snippets.

Last active August 23, 2020 19:44
What would you like to do?
Typescript higher order component (hoc) template
/* variation on */
import * as React from 'react'
import { wrapDisplayName } from 'recompose'
// Props you want the resulting component to take (besides the props of the wrapped component)
interface ExternalProps {}
// Props the HOC adds to the wrapped component
export interface InjectedProps {}
// Options for the HOC factory that are not dependent on props values
interface Options {
key?: string
const hoc = ({ key = 'Default value' }: Options = {}) => <OriginalProps extends {}>(
Component: React.ComponentType<OriginalProps & InjectedProps>,
) => {
class HOC extends React.Component<OriginalProps & ExternalProps> {
render() {
return <div />
if (process.env.NODE_ENV !== 'production') {
(HOC as any).displayName = wrapDisplayName(Component, 'hoc')
return HOC
export default hoc
Copy link

btw, this fails when you set "declaration: true" on tsconfig.
I've updated the gist using the answer from

Here's the updated version:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment