hoist-react-instance-methods
v2.0.0 react hoc instance
hoist-react-instance-methods
Copies specific methods from a child instance to a parent instance. Can be useful in Higher Order Components.
Motivations
It's recommented to use Higher Order Components (HOC) over mixins
and over context
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html https://twitter.com/dan_abramov/status/749715530454622208/photo/1
But sometimes HOC is burdensome
Example
// some fake HOCs
@connectRedux()
@withRouter()
@sthElse()
class MyAwesomeInput extends Component {
focus() {
return this.input.focus();
}
render() {
return (
<label>
<input ref={(input) => this.input = input} />
</label>
);
}
}
class App extends Component {
componentDidMount() {
// WTF!!! This is not an awesome Input!!!
this.awesomeInput.getWrappedInstance().getWrappedInstance().getWrappedInstance().focus();
}
render() {
return (
<MyAwesomeInput ref={(input) => this.awesomeInput = input} />
);
}
}
With hoist-react-instance-methods
@hoistReactInstanceMethods(
// get instance
(input) => input.getWrappedInstance().getWrappedInstance().getWrappedInstance(),
// specify method names to be copied
['focus']
)
@connectRedux()
@withRouter()
@sthElse()
class MyAwesomeInput extends Component {
focus() {
return this.input.focus();
}
render() {
return (
<div>
<input ref={(input) => this.input = input} />
</div>
);
}
}
class App extends Component {
componentDidMount() {
// Awesome!
this.awesomeInput.focus();
}
render() {
return (
<MyAwesomeInput ref={(input) => this.awesomeInput = input} />
);
}
}
Usage
import hoistReactInstanceMethods from 'hoist-react-instance-methods';
hoistReactInstanceMethods(getInstance, methods)(TargetComponent);
// `getInstance` example:
// const getInstance = (instance) => instance.refs.app;
Arguments
getInstance
(Function): Get the ref element. The only argumentinstance
is the instance ofTargetComponent
. Should return a component instancemethods
([String]): Specify method names to be copied
Returns
A higher-order React component class
Installation
yarn add hoist-react-instance-methods
License
MIT
npm i hoist-react-instance-methods
Metadata
- MIT
- Whatever
- cap32
- released 4/1/2017