https://github.com/elado/hoist-non-react-methods
Copies non-react specific methods from a child component to a parent component
https://github.com/elado/hoist-non-react-methods
Last synced: about 1 month ago
JSON representation
Copies non-react specific methods from a child component to a parent component
- Host: GitHub
- URL: https://github.com/elado/hoist-non-react-methods
- Owner: elado
- License: mit
- Created: 2016-01-26T00:33:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-11-01T14:45:21.000Z (over 5 years ago)
- Last Synced: 2024-10-31T20:42:04.348Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 11
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# hoist-non-react-methods
### I recommend using https://github.com/elado/react-ref-method-forwarder or React 16.3+ `React.forwardRef` instead
> Copies non-react specific methods from a child component to a parent component
[](https://travis-ci.org/elado/hoist-non-react-methods) [](https://www.npmjs.com/package/hoist-non-react-methods) [](https://codeclimate.com/github/elado/hoist-non-react-methods)
**Inspired by @mridgway's [hoist-non-react-statics](https://github.com/mridgway/hoist-non-react-statics)**
When wrapping a component (see [Higher-Order Components](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) 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 (
this.refs.composer.focus()}>
)
}
}
```
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.refs.composer.focus()}>
)
}
}
```
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 (
this.refs.composer.focus()}>
)
}
}
```
## 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