react-passthrough

This code was featured in the article Building a property passthrough Higher-Order Component for React.

react-passthrough is a Higher-Order Component for React which adds a passthrough method to your classes. This method returns an object which contains all properties from this.propsexcept those specified in propTypes. It can be used as an ES7 class decorator.

The decorator can be configured with lists of properties to force passing of (regardless of being in propTypes), or to always omit.

Installation

Install with NPM:

``
npm install react-passthrough --save
`

Example usage

$3

`
import React from 'react'
import passthrough from 'react-passthrough'

@passthrough({force: ['disabled'], omit: ['children', 'form']})
class Control extends React.Component {
static propTypes = {
disabled: React.PropTypes.bool,
className: React.PropTypes.className,
}

render() {
let className = 'Control '
if (this.props.disabled) className += 'Control-disabled '
if (this.props.className) className += this.props.className

return (



)
}
}
`

$3

`
import React from 'react'
import passthrough from 'react-passthrough'

class Control extends React.Component {
render() {
let className = 'Control '
if (this.props.disabled) className += 'Control-disabled '
if (this.props.className) className += this.props.className

return (


)
}
}

// Make sure to set propTypes before you run passthrough
Control.propTypes = {
disabled: React.PropTypes.bool,
className: React.PropTypes.className,
}

passthrough({force: ['disabled'], omit: ['children', 'form']})(Control)
`




How it works

When you run passthrough, react-passthrough immediately generates a list of properties to passthrough based on the value of the passed in component's propTypes, and the values of the force and omit options.

A passthrough` method is then added to the component's prototype. This function then needs to be called within your render function to do the actual passthrough.