Add new withElementPortal HOC (fixes #4)

Author: vitorbal

README.md

@@ -110,5 +110,34 @@ Then our `CoolHeaderComponent` from the example above would receive the followin
 }
 ```
 
+## Usage as Higher Order Component
+`ElementPortal` can also be used as a [HOC](https://facebook.github.io/react/docs/higher-order-components.html):
+
+```js
+import { withElementPortal } from 'react-element-portal';
+import MyComponent from 'my-component';
+
+const MyComponentWithPortal = withElementPortal(MyComponent);
+
+ReactDOM.render(
+  <MyComponentWithPortal id="user" />,
+  document.getElementById('app')
+);
+```
+
+or composing with other HOC's:
+
+```js
+import { withElementPortal } from 'react-element-portal';
+import { compose, connect } from 'react-redux';
+
+const MyComponent = (props) => <h1>Hello, {props.name}!</h1>;
+
+const MyComposedComponent = compose(
+  withElementPortal,
+  connect((state) => ({ name: state.name }))
+)(MyComponent);
+```
+
 ## Passing context to your ElementPortal
 Context from your main tree is passed down automatically to your `ElementPortal`. For example, if you use Redux, the `store` context will not get lost, and using `connect` will behave as expected in the children of your `ElementPortal`.

package.json

@@ -2,7 +2,7 @@
   "name": "react-element-portal",
   "version": "1.0.0",
   "description": "Render a React component inline, but target a DOM element (or elements) by id or selector.",
-  "main": "lib/ElementPortal.js",
+  "main": "lib/index.js",
   "scripts": {
     "test": "ava test",
     "prebuild": "rm -rf lib && mkdir -p lib",

src/ElementPortal.js

@@ -27,7 +27,6 @@ export const getNodeData = (node) => {
 };
 
 const ElementPortal = React.createClass({
-
   propTypes: {
     id: PropTypes.string,
     selector: PropTypes.string,

src/index.js

@@ -0,0 +1,5 @@
+import ElementPortal from './ElementPortal';
+import withElementPortal from './withElementPortal';
+
+export { withElementPortal };
+export default ElementPortal;

src/withElementPortal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ElementPortal from './ElementPortal';
+
+function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
+const withElementPortal = (Child) => {
+  const Portal = ({ id, selector, shouldReset, ...childProps }) => {
+    const ChildWrapper = (props) => <Child {...childProps} {...props} />;
+    return <ElementPortal id={id} selector={selector} shouldReset={shouldReset} view={ChildWrapper} />;
+  };
+
+  Portal.displayName = `WithElementPortal(${getDisplayName(Child)})`;
+
+  return Portal;
+};
+
+export default withElementPortal;

test/ElementPortal.js

@@ -2,12 +2,12 @@ import test from 'ava';
 import React from 'react';
 import { render } from 'react-dom';
 import { connect, Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { compose, createStore } from 'redux';
 
 import 'babel-core/register';
 
 import uniqueId from './helpers/uniqueId';
-import ElementPortal from '../src/ElementPortal';
+import ElementPortal, { withElementPortal } from '../src';
 
 test('can render to ElementPortal using element id', t => {
   const node = document.createElement('div');
@@ -174,3 +174,104 @@ test('transfers context to the portal', t => {
   store.dispatch({type: 'INC'});
   t.is(document.getElementById(headerId).textContent, '1');
 });
+
+test('can be used as higher-order component', t => {
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  const headerId = uniqueId();
+  const appId = uniqueId();
+  node.innerHTML = `
+    <div id="${headerId}">
+    </div>
+    <div id="${appId}">
+    </div>
+  `;
+  const Greeting = () => (<div>Hello</div>);
+  const GreetingWithPortal = withElementPortal(Greeting);
+
+  render(
+    <div>
+      <GreetingWithPortal id={headerId} />
+    </div>,
+    document.getElementById(appId)
+  );
+  t.is(document.getElementById(headerId).textContent, 'Hello');
+});
+
+test('can be composed with other HOC\'s', t => {
+  const store = createStore((state = { name: 'world' }) => {
+    return state;
+  });
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  const headerId = uniqueId();
+  const appId = uniqueId();
+  node.innerHTML = `
+    <div id="${headerId}">
+    </div>
+    <div id="${appId}">
+    </div>
+  `;
+
+  const MyComponent = (props) => <h1>Hello, {props.name}!</h1>;
+
+  const MyComposedComponent = compose(
+    withElementPortal,
+    connect((state) => ({ name: state.name }))
+  )(MyComponent);
+
+  render(
+    <Provider store={store}>
+      <MyComposedComponent id={headerId} />
+    </Provider>,
+    document.getElementById(appId)
+  );
+
+  t.is(document.getElementById(headerId).textContent, 'Hello, world!');
+});
+
+test('passes along data attributes when used as HOC', t => {
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  const headerId = uniqueId();
+  const appId = uniqueId();
+  node.innerHTML = `
+    <div id="${headerId}" data-name="Joe">
+    </div>
+    <div id="${appId}">
+    </div>
+  `;
+  const Greeting = ({data}) => (<div>Hello {data.name}</div>);
+  const GreetingWithPortal = withElementPortal(Greeting);
+
+  render(
+    <div>
+      <GreetingWithPortal id={headerId} />
+    </div>,
+    document.getElementById(appId)
+  );
+  t.is(document.getElementById(headerId).textContent, 'Hello Joe');
+});
+
+test('passes props through to the inner component when used as a HOC', t => {
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  const headerId = uniqueId();
+  const appId = uniqueId();
+  node.innerHTML = `
+    <div id="${headerId}">
+    </div>
+    <div id="${appId}">
+    </div>
+  `;
+  const Greeting = ({name}) => (<div>Hello {name}</div>);
+  const GreetingWithPortal = withElementPortal(Greeting);
+
+  render(
+    <div>
+      <GreetingWithPortal id={headerId} name="Joe" />
+    </div>,
+    document.getElementById(appId)
+  );
+  t.is(document.getElementById(headerId).textContent, 'Hello Joe');
+});