hoist-non-react-methods

> Copies non-react specific methods from a child component to a parent component

  

Inspired by @mridgway's hoist-non-react-statics

When wrapping a component (see Higher-Order Components methods that are defined in the child component aren't accessible anymore. This module makes those methods available on the wrapper component's prototype.

Installation

``sh
npm install hoist-non-react-methods --save
`

When is it needed?

Components can have public methods that are accessible through their instance under parent's refs.

`js
class Composer extends React.Component {
render() {
return
}

focus() {
return this.input.focus()
}
}

class Root extends React.Component {
render() {
return (



)
}
}
`

Assuming you have a component which is decorated, the method focus will be lost, because the ref will point the decorator component.

`js
@someDecorator()
class Composer extends React.Component {
render() {
return
}

focus() {
return this.input.focus()
}
}

function someDecorator() {
return function (WrappedComponent) {
class Wrapper extends Component {
static displayName = Wrapper(${WrappedComponent.displayName})

componentWillMount() {
// some specific logic in a decorator
}

render() {
return
}
}

return Wrapper
}
}

class Root extends React.Component {
// this.refs.composer.focus is undefined!
render() {
return (



)
}
}
`

This package provides a function that copies all the methods (prototype and static) from the wrapped component to the wrapper, but keeps all react specific methods (e.g. componentDidMount etc.) untouched.

`js
@someDecorator()
class Composer extends React.Component {
componentWillMount() {
// some specific behavior of Composer isn't hoisted to wrapper
}

render() {
return
}

static someStaticMethod() {

}

focus() {
return this.input.focus()
}
}

function someDecorator() {
return function (WrappedComponent) {
class Wrapper extends Component {
static displayName = Wrapper(${WrappedComponent.displayName})

componentWillMount() {
// some specific logic in a decorator, left intact
}

render() {
return
}
}

return hoistNonReactMethods(Wrapper, WrappedComponent, {
delegateTo: c => c.refs.wrappedComponent
})
}
}

class Root extends React.Component {
// works!
render() {
return (



)
}
}
`

API

`js
hoistNonReactMethods(
Wrapper: ReactComponent,
WrappedComponent: ReactComponent,
{
delegateTo: function(ReactComponent wrapperComponentInstance):ReactComponent childComponentInstance,
hoistStatics: boolean,
}
)
`

The third parameter is a configuration object. Options:

- delegateTo: a function that gets the instance of the wrapper component and returns the instance of the wrapped component (e.g. wrapper => wrapper.refs.child)
- hoistStatics: true/false - controls whether to hoist statics or not

Test

`sh
npm install
npm test
``

License

MIT