transform-props-with
v2.2.0
Published
Higher-order component for transforming props
Downloads
628
Maintainers
Readme
Transform Props With
Transform Props With is a functional approach to React component reuse.
Compose small testable functions to modify props for components.
Install
$ npm install transform-props-with --save
or with Yarn
$ yarn add transform-props-with
Usage
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(<EnhancedComponent size={100} />, node);
// Would render <BaseComponent size={200} />
See the full API documentation for details.
Merge objects
Pass an object to merge it with provided props automatically.
const EnhancedComponent = tx({ stars: 10 })(BaseComponent)
ReactDOM.render(<EnhancedComponent size={100} />, node);
// Would render <BaseComponent size={100} stars={ 10 } />
Note: this is not a deep merge. It is equal to this transformation:
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.
const EnhancedComponent =
tx([ addFive, doubleSize ])(BaseComponent)
Of course, transformations and object merges can be mixed.
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. 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
- Wrap general component
- Switch two props
- Track click (decorating
onClick
) - Build BEM components using dumb-bem
Notes
Transform Props With returns a stateless functional component; these were introduced in React v0.14.0 (release notes).
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.