Skip to content

Instantly share code, notes, and snippets.

@poberwong
Created January 17, 2017 03:01
Show Gist options
  • Save poberwong/d1135db22b043419c50084e171840ec7 to your computer and use it in GitHub Desktop.
Save poberwong/d1135db22b043419c50084e171840ec7 to your computer and use it in GitHub Desktop.
a simple high order component
export default (Component) => (props) => {
return (
<YourWrapper ...>
<Component />
</YourWrapper>
)
}
// Usage:
// in your component, you can use it with
export default highOrderComponent(YourComponent), it will be wrappered by <YourWrapper />
// or
module.exports = highOrderComponent(YourComponent)
// of course, you can use it like following with annotation above declaration of the component
@highOrderComponent
export default ...
@poberwong
Copy link
Author

poberwong commented Jan 17, 2017

As we all know, react-redux is a known highOrderComponent, you can use it like following:

export default (...params) => (Component) => (props) => {
  // you can use params here
  return (
    <YourWrapper ...>
       <Component />
    </YourWrapper>
  )
}

// When using

highOrderComponent(params)(YourComponent)
// or
@highOrderComponent(params)

// Of course, you can use normal class component on the last layer of arrow functions.

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