🔁 Functional approach to React component reuse
JavaScript
Latest commit dde90b7 Oct 20, 2016 @robinpokorny committed on GitHub Merge pull request #27 from robinpokorny/greenkeeper-jsdoc-to-markdow…
…n-2.0.1

Update jsdoc-to-markdown to version 2.0.1 🚀

README.md

Transform Props With

Transform Props With is a functional approach to React component reuse.

npm Build Status license js-standard-style Managed by Yarn Developed at Wimdu

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 automatically merge it with provided props.

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 developer can access the DOM element of the inner component.

Examples

Notes

  • Transform Props With returns a stateless functional component, these were introduced in React v0.14.0 (release notes).

  • Polyfill for Array.prototype.reduce might be needed to support older browsers.