https://github.com/vslinko/hoc

[TODO] Higher-order Components Helpers
https://github.com/vslinko/hoc

Last synced: 22 days ago
JSON representation

[TODO] Higher-order Components Helpers

• Host: GitHub
• URL: https://github.com/vslinko/hoc
• Owner: vslinko
• License: mit
• Created: 2015-05-15T11:26:31.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-05-15T13:16:25.000Z (over 9 years ago)
• Last Synced: 2024-09-21T00:31:26.225Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 117 KB
• Stars: 12
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Higher-order Components Helpers

Higher-order component is awesome way to extend components functionality.

But higher-order components have one nasty problem — we have no access to wrapped component.

This small module tries to solve that problem.

## FAQ

> Why do you need access to wrapped component?

I'm using ES6 decorators to wrap my "dumb" components.

Sometimes I want to render pure "dumb" components without any decorators.

This module gives me access to pure component.

> What is "dumb" component?

Please read [this article](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).

## API

### ES6

```js

import {hocDecorator, getWrappedComponent} from 'hoc';

const smartComponentDecorator = hocDecorator(Component => class SmartComponent {

  render() {

    return ;

  }

});

@smartComponentDecorator

class DumbComponent {

  render() {/* */}

}

console.log(DumbComponent.name); // SmartComponent

console.log(getWrappedComponent(DumbComponent).name); // DumbComponent

```

### ES5

```js

var hoc = require('hoc');

var DumbComponent = React.createClass({

  render: function() {/* */}

});

var SmartComponent = hoc(DumbComponent, React.createClass({

  render: function() {

    return ;

  }

}))

console.log(SmartComponent.displayName); // SmartComponent

console.log(hoc.getWrappedComponent(SmartComponent).displayName); // DumbComponent

```