Higher order component to pass through unknown props to a child component.
npm install react-passthroughThis 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.
Install with NPM:
```
npm install react-passthrough --save
`
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 (
{this.props.children}
)
}
}// 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.