Skip to content

Instantly share code, notes, and snippets.

@alexnm

alexnm/hoc.jsx

Last active February 27, 2018 09:14
Show Gist options
  • Save alexnm/8cf81859a242f40f5a98f186b8cf8891 to your computer and use it in GitHub Desktop.
Save alexnm/8cf81859a242f40f5a98f186b8cf8891 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hoc.jsx
const withProps = ( newProps ) => ( WrappedComponent ) => {
const ModifiedComponent = ( ownProps ) => ( // the modified version of the component
<WrappedComponent { ...ownProps } { ...newProps } /> // original props + new props
);
return ModifiedComponent;
};
const Details = ( { name, title, language } ) => (
<div>
<h1>{ title }</h1>
<p>{ name } works with { language }</p>
</div>
);
const newProps = { name: "Alex" }; // this is added by the hoc
const ModifiedDetails = withProps( newProps )( Details ); // hoc is curried for readability
const App = () => (
<ModifiedDetails
title="I'm here to stay"
language="JavaScript"
/>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment