https://github.com/fakundo/react-hoc-with-ref
Common way to get access to wrapped component through HoC
https://github.com/fakundo/react-hoc-with-ref
Last synced: 6 months ago
JSON representation
Common way to get access to wrapped component through HoC
- Host: GitHub
- URL: https://github.com/fakundo/react-hoc-with-ref
- Owner: fakundo
- Created: 2017-06-13T10:42:17.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-06T16:04:00.000Z (almost 9 years ago)
- Last Synced: 2025-01-23T03:41:24.960Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Common way to get access to wrapped component through HoC
```
npm install react-hoc-with-ref
```
App.js
```javascript
import React, { Component, createElement } from 'react';
import createWithRef from 'react-hoc-with-ref';
const decorate = WrappedComponent =>
class DecoratedApp extends createWithRef(WrappedComponent) {
render() {
return createElement(WrappedComponent, {
...this.props,
...this.getRefProps()
});
}
};
@decorate
export default class App extends Component {
render() {
return (
Test);
}
}
```
index.js
```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
class TestComponent extends Component {
appRef = (appComponent) => {
if (appComponent) {
console.log(appComponent.getWrappedInstance()); // App
}
};
render() {
return ();
}
}
ReactDOM.render(, document.querySelector('#app'));
```