https://github.com/malash/rp-hoc
Convert between Render Props and HOC.
https://github.com/malash/rp-hoc
higher-order-component hoc react render-props
Last synced: about 2 months ago
JSON representation
Convert between Render Props and HOC.
- Host: GitHub
- URL: https://github.com/malash/rp-hoc
- Owner: malash
- License: mit
- Created: 2018-04-16T12:05:35.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-24T12:49:34.000Z (about 8 years ago)
- Last Synced: 2025-10-29T18:51:09.586Z (8 months ago)
- Topics: higher-order-component, hoc, react, render-props
- Language: JavaScript
- Homepage:
- Size: 401 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rp-hoc
Convert between Render Props and HOC
| Package | Version | Dependencies | DevDependencies | Build |
|--------|-------|------------|----------|----------|
| `rp-hoc` | [](https://www.npmjs.com/package/rp-hoc) | [](https://david-dm.org/malash/rp-hoc) | [](https://david-dm.org/malash/rp-hoc?type=dev) | [](https://travis-ci.org/malash/rp-hoc) |
## Install
Install from `npm`:
```bash
npm install rp-hoc --save
```
Import:
```javascript
import { toRP, withRP } from 'rp-hoc';
```
If you use `decorator` with [Babel](https://babeljs.io/) please run this command:
```bash
npm install --save-dev babel-plugin-transform-decorators-legacy
```
And modify the `.babelrc` file to enable the plugin:
```javascript
{
"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](https://github.com/malash/rp-hoc/blob/40a36fbfbef8c1e9e585f197c310cd9e59426ed9/test/hoc-to-rp/react-redux.js#L92-L117) |
| useComponent | `false` | Use `React.Component` to create new component instead of [Stateless Component](https://reactjs.org/docs/components-and-props.html#functional-and-class-components). | [test/hoc-to-rp/react-redux.js#L119-L149](https://github.com/malash/rp-hoc/blob/40a36fbfbef8c1e9e585f197c310cd9e59426ed9/test/hoc-to-rp/react-redux.js#L119-L149) |
| usePureComponent | `false` | Use `React.PureComponent` to create new component instead of [Stateless Component](https://reactjs.org/docs/components-and-props.html#functional-and-class-components). | [test/hoc-to-rp/react-redux.js#L151-L181](https://github.com/malash/rp-hoc/blob/40a36fbfbef8c1e9e585f197c310cd9e59426ed9/test/hoc-to-rp/react-redux.js#L151-L181) |
#### Example [React Redux](https://github.com/reactjs/react-redux)
Use decorator:
```javascript
@connect(
mapStateToProps,
mapDispatchToProps,
)
class App extends Component {
render() {
const { counter, inc, dec } = this.props;
return (
{counter}
inc()}>Increment
dec()}>Decrement
);
}
}
```
Convert to render-props component:
```javascript
const Connect = toRP(
connect(
mapStateToProps,
mapDispatchToProps,
),
);
const App = () => (
{({ counter, inc, dec }) => (
{counter}
inc()}>Increment
dec()}>Decrement
)}
);
```
Use different `renderKey`:
```javascript
const Connect = toRP(
connect(
mapStateToProps,
mapDispatchToProps,
), {
renderKey: 'myRender', // this line changed
},
);
const App = () => (
(
{counter}
inc()}>Increment
dec()}>Decrement
)}
/>
);
```
### `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](https://github.com/malash/rp-hoc/blob/40a36fbfbef8c1e9e585f197c310cd9e59426ed9/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](https://github.com/malash/rp-hoc/blob/40a36fbfbef8c1e9e585f197c310cd9e59426ed9/test/rp-to-hoc/react-value.js#L31-L49) |
#### Example [React Value](https://github.com/JedWatson/react-value)
Use render-props component:
```javascript
import Toggle from 'react-toggled';
const App = () => (
{({ on, getTogglerProps }) => (
Toggle me
{on ? 'Toggled On' : 'Toggled Off'}
)}
);
```
Convert to heigher-order component:
```javascript
const App = ({ on, getTogglerProps }) => (
Toggle me
{on ? 'Toggled On' : 'Toggled Off'}
);
const WithToggle = withRP();
const AppWithToggle = WithToggle(App);
```
Also support `decorator`:
```javascript
const WithToggle = withRP();
@WithToggle
class App extends Component {
render() {
const { on, getTogglerProps } = this.props;
return (
Toggle me
{on ? 'Toggled On' : 'Toggled Off'}
);
}
}
```
To prevent `prop-types` warning, you can use `withRP(component, props, options)`:
```javascript
const WithToggle = withRP(Toggle, { defaultOn: true });
@WithToggle
class App extends Component {
render() {
const { on, getTogglerProps } = this.props;
return (
Toggle me
{on ? 'Toggled On' : 'Toggled Off'}
);
}
}
```