view prop → component prop

Small change to be coherent with what the React community use.

Author: ngryman

src/ElementPortal.js

@@ -10,9 +10,8 @@ const ElementPortal = createReactClass({
     id: PropTypes.string,
     selector: PropTypes.string,
     mapDomNodeToProps: PropTypes.func,
-    // Remove styles and classes from node.
     shouldReset: PropTypes.bool,
-    view: PropTypes.func
+    component: PropTypes.func
   },
 
   componentDidMount() {
@@ -29,18 +28,17 @@ const ElementPortal = createReactClass({
     const mapDomNodeToProps = this.props.mapDomNodeToProps || noop;
     const nodesBySelector = (this.props.selector && [].slice.call(document.querySelectorAll(this.props.selector))) || [];
     const nodes = nodesById.concat(nodesBySelector);
+    const { component } = this.props;
 
     nodes.forEach(node => {
       if (this.props.shouldReset) {
         node.className = '';
         node.removeAttribute('style');
       }
 
-      const View = this.props.view;
-
-      const children = View ?
-        <View {...mapDomNodeToProps(node)} /> :
-        React.Children.only(this.props.children);
+      const children = component
+        ? React.createElement(component, mapDomNodeToProps(node))
+        : React.Children.only(this.props.children);
 
       ReactDOM.unstable_renderSubtreeIntoContainer(
         this,

src/withElementPortal.js

@@ -13,7 +13,7 @@ const withElementPortal = (Child) => {
       selector={selector}
       mapDomNodeToProps={mapDomNodeToProps}
       shouldReset={shouldReset}
-      view={ChildWrapper}
+      component={ChildWrapper}
     />;
   };
 

test/ElementPortal.js

@@ -74,7 +74,7 @@ test('can render to ElementPortal using selector with custom component', t => {
   const Greeting = () => (<div>Hello</div>);
   render(
     <div>
-      <ElementPortal selector="li.greeting" view={Greeting}/>
+      <ElementPortal selector="li.greeting" component={Greeting}/>
     </div>,
     document.getElementById(appId)
   );
@@ -102,7 +102,7 @@ test('map dom node to props', t => {
   const Greeting = ({ name, isNew }) => (<div>Hello {isNew && 'and welcome '}{name}</div>);
   render(
     <div>
-      <ElementPortal selector="li.greeting" view={Greeting} mapDomNodeToProps={mapDomNodeToProps} />
+      <ElementPortal selector="li.greeting" component={Greeting} mapDomNodeToProps={mapDomNodeToProps} />
     </div>,
     document.getElementById(appId)
   );