https://github.com/robinpokorny/transform-props-with
:repeat: Functional approach to React component reuse
https://github.com/robinpokorny/transform-props-with
decorator functional-js functional-programming props react react-native recompose transformations
Last synced: 8 days ago
JSON representation
:repeat: Functional approach to React component reuse
- Host: GitHub
- URL: https://github.com/robinpokorny/transform-props-with
- Owner: robinpokorny
- License: mit
- Created: 2015-10-23T15:01:22.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-12-28T09:15:24.000Z (about 2 years ago)
- Last Synced: 2026-01-20T10:53:50.832Z (about 1 month ago)
- Topics: decorator, functional-js, functional-programming, props, react, react-native, recompose, transformations
- Language: JavaScript
- Homepage:
- Size: 264 KB
- Stars: 22
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Transform Props With
*Transform Props With* is a functional approach to React component reuse.
[](https://www.npmjs.com/package/transform-props-with)
[](https://semaphoreci.com/robinpokorny/transform-props-with)
[](https://github.com/robinpokorny/transform-props-with/blob/master/LICENSE)
[](https://robinpokorny.github.io/git3moji/)
[](https://github.com/prettier/prettier)
[](https://yarnpkg.com/)
[](http://tech.wimdu.com/)
> **Compose small testable functions to modify props for components.**
## Install
```shell
$ npm install transform-props-with --save
```
or with [Yarn](https://github.com/yarnpkg/yarn)
```shell
$ yarn add transform-props-with
```
## Usage
```js
import tx from 'transform-props-with'
import BaseComponent from './base-component'
const doubleSize = (oldProps) => {
const { size, ...props } = oldProps
return {
size: size * 2,
...props
}
}
const EnhancedComponent = tx(doubleSize)(BaseComponent)
ReactDOM.render(, node)
// Would render
```
See the full [API documentation](docs/api.md) for details.
### Merge objects
Pass an object to merge it with provided props automatically.
```js
const EnhancedComponent = tx({ stars: 10 })(BaseComponent)
ReactDOM.render(, node)
// Would render
```
Note: this is *not* a deep merge. It is equal to this transformation:
```js
const setStarsTo10 = (oldProps) => Object.assign({}, oldProps, { stars: 10 })
```
### Multiple transformations
Pass an array of transformations to the function, and they will all be combined
to a single transformation *left to right*.
In the following example, `addFive` would be applied first, and `doubleSize`
will be called with props returned by it.
```js
const EnhancedComponent =
tx([ addFive, doubleSize ])(BaseComponent)
```
Of course, transformations and object merges can be mixed.
```js
const EnhancedComponent =
tx([ addFive, { stars: 10 }, doubleSize ])(BaseComponent)
```
### Refs to Components
React enables to get references to the DOM elements using `ref` props, cf. [documentation](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute). When passed to an enhanced component this would point to the *wrapper*. The library will rename `__ref` to `ref` so the developer can access the DOM element of the inner component.
## Examples
* [Change a prop value](examples/double-size.js)
* [Wrap general component](examples/wrap-general-component.js)
* [Switch two props](examples/switch-foo-bar.js)
* [Track click](examples/track-click.js) (decorating `onClick`)
* [Build BEM components](https://github.com/agudulin/dumb-bem#usage) using [dumb-bem](https://www.npmjs.com/package/dumb-bem)
### Notes
* *Transform Props With* returns a stateless functional component; these were introduced in
React v0.14.0 ([release notes](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html)).
* Polyfill for
[Array.prototype.reduce] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
might be needed to support older browsers.