Skip to content

Instantly share code, notes, and snippets.

@devdoomari3
Forked from rosskevin/hoc-template.tsx
Last active December 19, 2019 08:10
Show Gist options
  • Save devdoomari3/2d330c9c75e2e3c235906173850e0537 to your computer and use it in GitHub Desktop.
Save devdoomari3/2d330c9c75e2e3c235906173850e0537 to your computer and use it in GitHub Desktop.
Typescript higher order component (hoc) template
/* variation on https://medium.com/@DanHomola/react-higher-order-components-in-typescript-made-simple-6f9b55691af1 */
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>,
): React.ComponentClass<OriginalProps> => {
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
@ashnur
Copy link

ashnur commented Sep 26, 2018

So what is the return of hoc1(hoc2(hoc3(hoc4(hoc5(hoc6(hoc7(hoc8(hoc9(<SomeComponent/>))))))))) What if in 11 files I do this to the same SomeComponent, but in different orders, can I test for equality of Types? Classes? Objects? Anything?

@devdoomari3
Copy link
Author

@ashnur sorry but I haven't tested out your example...

I won't have time for this so... it'll be nice if you can create a git repo with your example (I'll star it 👍 )

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