# transform-props-with
> Higher-order component for transforming props
Latest version **2.2.0** (published 2017-04-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install transform-props-with
pnpm add transform-props-with
yarn add transform-props-with
bun add transform-props-with
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.2.0 |
| Published | 2017-04-07 |
| First published | 2015-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | Robin Pokorny |
| Maintainers | robinpokorny |
| Keywords | tx, transform, props, react, decorator |
## Links
- npm: https://www.npmjs.com/package/transform-props-with
- Repository: https://github.com/robinpokorny/transform-props-with
- Homepage: https://github.com/robinpokorny/transform-props-with#readme
- Issues: https://github.com/robinpokorny/transform-props-with/issues
- npm.io page: https://npm.io/package/transform-props-with
## Dependencies (1)
- [lodash](https://npm.io/package/lodash.md) ^4.10.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.2.0 (latest) — 2017-04-07
- 2.1.0 — 2016-09-01
- 2.0.1 — 2016-06-24
- 2.0.0 — 2016-06-08
- 1.1.0 — 2016-04-11
- 1.0.0 — 2016-03-19
- 1.0.0-rc.0 — 2016-02-18
- 0.3.0 — 2016-02-11
- 0.2.1 — 2016-02-03
- 0.2.0 — 2016-02-03
- 0.1.0 — 2015-10-23
## 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)
[](http://standardjs.com/)
[](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.
---
_Source: https://npm.io/package/transform-props-with · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._