rp-hoc
Convert between Render Props and HOC
Package | Version | Dependencies | DevDependencies | Build |
---|---|---|---|---|
rp-hoc |
Install
Install from npm
:
npm install rp-hoc --save
Import:
;
If you use decorator
with Babel please run this command:
npm install --save-dev babel-plugin-transform-decorators-legacy
And modify the .babelrc
file to enable the plugin:
"plugins": "transform-decorators-legacy"
APIs
toRP(decorator, options)
Convert the decorator to a render-props component.
Options:
Option | Default value | Usage | Tests |
---|---|---|---|
renderKey | 'children' |
change the callback key in props. | test/hoc-to-rp/react-redux.js#L92-L117 |
useComponent | false |
Use React.Component to create new component instead of Stateless Component. |
test/hoc-to-rp/react-redux.js#L119-L149 |
usePureComponent | false |
Use React.PureComponent to create new component instead of Stateless Component. |
test/hoc-to-rp/react-redux.js#L151-L181 |
React Redux
ExampleUse decorator:
@ { const counter inc dec = thisprops; return <div> <div id="counter">counter</div> <button id="inc" onClick= >Increment</button> <button id="dec" onClick= >Decrement</button> </div> ; }
Use render-props component:
const Connect = ; const App = <Connect> <div> <div id="counter">counter</div> <button id="inc" onClick= >Increment</button> <button id="dec" onClick= >Decrement</button> </div> </Connect>;
Use different renderKey
:
const Connect = ; const App = <Connect // this line changed myRender= <div> <div id="counter">counter</div> <button id="inc" onClick= >Increment</button> <button id="dec" onClick= >Decrement</button> </div> />;
withRP(element, options)
and withRP(component, props, options)
Convert the render-props component to a decorator.
Options:
Option | Default value | Usage | Tests |
---|---|---|---|
renderKey | 'children' | change the callback key in props. | test/rp-to-hoc/react-value.js#L31-L49 |
multiArgs | null | Convert callback arguments to Array . Otherwise callback props will be assigned with original props by Object.assign . |
test/rp-to-hoc/react-value.js#L31-L49 |
React Value
ExampleUse render-props component:
;const App = <Toggle defaultOn> <div> <button ...>Toggle me</button> <div id="result">on ? 'Toggled On' : 'Toggled Off'</div> </div> </Toggle>;
Use heigher-order component:
const WithToggle = ; @WithToggle { const on getTogglerProps = thisprops; return <div> <button ...>Toggle me</button> <div id="result">on ? 'Toggled On' : 'Toggled Off'</div> </div> ; }
To prevent prop-types
warning, you can use withRP(component, props, options)
:
const WithToggle = ; @WithToggle { const on getTogglerProps = thisprops; return <div> <button ...>Toggle me</button> <div id="result">on ? 'Toggled On' : 'Toggled Off'</div> </div> ; }