https://github.com/cap32/hoist-react-instance-methods
Copies specific methods from a child element to a parent instance
https://github.com/cap32/hoist-react-instance-methods
hoc react
Last synced: about 1 month ago
JSON representation
Copies specific methods from a child element to a parent instance
- Host: GitHub
- URL: https://github.com/cap32/hoist-react-instance-methods
- Owner: Cap32
- License: mit
- Created: 2017-03-09T07:08:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-01T16:50:05.000Z (about 9 years ago)
- Last Synced: 2025-07-07T06:44:56.531Z (12 months ago)
- Topics: hoc, react
- Language: JavaScript
- Size: 46.9 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# hoist-react-instance-methods
[](https://travis-ci.org/Cap32/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
```js
// some fake HOCs
@connectRedux()
@withRouter()
@sthElse()
class MyAwesomeInput extends Component {
focus() {
return this.input.focus();
}
render() {
return (
this.input = input} />
);
}
}
class App extends Component {
componentDidMount() {
// WTF!!! This is not an awesome Input!!!
this.awesomeInput.getWrappedInstance().getWrappedInstance().getWrappedInstance().focus();
}
render() {
return (
this.awesomeInput = input} />
);
}
}
```
### With hoist-react-instance-methods
```js
@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 (
this.input = input} />
);
}
}
class App extends Component {
componentDidMount() {
// Awesome!
this.awesomeInput.focus();
}
render() {
return (
this.awesomeInput = input} />
);
}
}
```
## Usage
```js
import hoistReactInstanceMethods from 'hoist-react-instance-methods';
hoistReactInstanceMethods(getInstance, methods)(TargetComponent);
// `getInstance` example:
// const getInstance = (instance) => instance.refs.app;
```
###### Arguments
1. `getInstance` (Function): Get the ref element. The only argument `instance` is the instance of `TargetComponent`. Should return a component instance
2. `methods` ([String]): Specify method names to be copied
###### Returns
A higher-order React component class
## Installation
```bash
yarn add hoist-react-instance-methods
```
## License
MIT