Skip to content

Instantly share code, notes, and snippets.

@develohpanda
Forked from devdoomari3/hoc-template.tsx
Created February 27, 2019 11:34
Show Gist options
  • Save develohpanda/fccaf9813816050fc1f32c810534c4bb to your computer and use it in GitHub Desktop.
Save develohpanda/fccaf9813816050fc1f32c810534c4bb 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment