- Notifications
You must be signed in to change notification settings - Fork3
Handy little helper to create proper React HOC functions complete with hoisted statics and forwarded refs
License
godaddy/addhoc
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Handy little helper to create proper HOC functions complete with hoisted statics and forwarded refs
As defined in theReact documentation, a Higher Order Component, or HOC, is a function that returns a React componentthat wraps a specified child component and often provides augmented functionality. Implementing HOCs can be hard,especially when considering hoisting statics, managingref forwarding, and handling display name.addhoc aims tohandle these challenges for you.
addhoc creates HOC functions that automatically:
- pass through unrelated
props - wrap the display name for easy debugging
- hoist non-React statics
- forward
refs
npm install addhoc
/**** Public API ****/// This is the main exported entrypointaddhoc(renderFn:Function,[name:String='WithHOC'],[...extraArgs]):Function/**** Signatures, not exported API ****/// This is the signature of the renderFn parameter to addhoc()renderFn(getWrappedComponent:Function,[...extraArgs]):React.Component// This is the signature of the getWrappedComponent parameter to renderFn()getWrappedComponent([additionalProps:Object]):React.Component
addhoc is a function that returns a HOC function. To construct your HOC, you simply pass a callback that acts as therender function of your top-level component. Your callback is provided a function parameter that returns the wrappedchild that's initially provided to the HOC. You can call that callback with an object ofprops to add to the wrappedcomponent.
importaddhocfrom'addhoc';importMyComponentfrom'./my-component';constwithFooProp=addhoc(getWrappedComponent=>getWrappedComponent({foo:true}),'WithFooProp');constMyComponentWithFoo=withFooProp(MyComponent);// Rendering a MyComponentWithFoo will create a MyComponent with prop foo = true
importReactfrom'react';importaddhocfrom'addhoc';importMyComponentfrom'./my-component';constwithDiv=addhoc(getWrappedComponent=><div>{getWrappedComponent()}</div>,'WithDiv');constMyComponentWithDiv=withDiv(MyComponent);// Rendering a MyComponentWithDiv will render a div that wraps a MyComponent
importReactfrom'react';importaddhocfrom'addhoc';importMyComponentfrom'./my-component';constMyContext=React.createContext('DefaultValue');constwithMyContext=addhoc(getWrappedComponent=><MyContext.Consumer>{value=>getWrappedComponent({ value})}</MyContext.Consumer>,'WithMyContext');constMyComponentWithMyContext=withMyContext(MyComponent);// ...render(){return<MyContext.Providervalue='ProvidedValue'><MyComponentWithMyContext/></MyContext.Provider>}// Now, the MyComponentWithMyContext automatically gets a prop called `value` that gets the context value passed in from// the context.
Sometimes, you want to set some values as part of assembling the HOC and have those available in your render function.You can pass arbitrary parameters after thename param toaddhoc and they'll be passed through as additionalparameters to your render function:
importaddhocfrom'addhoc';importMyComponentfrom'./my-component';constwithFooProp=addhoc((getWrappedComponent,extra)=>getWrappedComponent({foo:extra}),'WithFoo','EXTRA');constMyComponentWithFoo=withFooProp(MyComponent);// Rendering a MyComponentWithFoo will get a `foo` prop with value `EXTRA`
npmtestAbout
Handy little helper to create proper React HOC functions complete with hoisted statics and forwarded refs