Feedback

Author: aeharding

README.md

@@ -115,19 +115,19 @@ How does it work under the hood?
 
 This creates a detached DOM node, with a little extra functionality attached to allow transmitting props later on.
 
-This node will contain your portal contents later, within a `<div>`, and will eventually be attached in the target location.
+This node will contain your portal contents later, and will eventually be attached in the target location.
 
-An optional options object parameter can be passed to configure the node. The only supported option is `attributes`: this can be used to set the HTML attributes (style, class, etc.) of the intermediary, like so:
+An optional options object parameter can be passed to configure the node.
 
-```javascript
-const portalNode = portals.createHtmlPortalNode({
-	attributes: { id: "div-1", style: "background-color: #aaf; width: 100px;" }
-});
-```
+- `options.containerElement` can be set to `'div'` or `'span'` to contigure the detached DOM node container type.
 
-### `portals.createHtmlInlinePortalNode([options])`
+- `options.attributes` can be used to set the HTML attributes (style, class, etc.) of the intermediary, like so:
 
-Same as `portal.createHtmlPortalNode`, except it uses `<span>` instead of `<div>`. This can be helpful to avoid invalid HTML when portalling videos, etc into [phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content), which is invalid HTML markup and triggers [React validateDOMNesting](https://www.dhiwise.com/post/mastering-validatedomnesting-best-practices).
+    ```javascript
+    const portalNode = portals.createHtmlPortalNode({
+        attributes: { id: "div-1", style: "background-color: #aaf; width: 100px;" }
+    });
+    ```
 
 ### `portals.createSvgPortalNode([options])`
 

src/index.tsx

@@ -8,10 +8,20 @@ const ELEMENT_TYPE_SVG  = 'svg';
 
 type ANY_ELEMENT_TYPE = typeof ELEMENT_TYPE_HTML_BLOCK | typeof ELEMENT_TYPE_HTML_INLINE | typeof ELEMENT_TYPE_SVG;
 
-type Options = {
-    attributes: { [key: string]: string };
+type BaseOptions = {
+    attributes?: { [key: string]: string };
 };
 
+type HtmlOptions = BaseOptions & {
+    containerElement?: typeof ELEMENT_TYPE_HTML_BLOCK | typeof ELEMENT_TYPE_HTML_INLINE;
+};
+
+type SvgOptions = BaseOptions & {
+    containerElement?: typeof ELEMENT_TYPE_SVG;
+};
+
+type Options = HtmlOptions | SvgOptions;
+
 // ReactDOM can handle several different namespaces, but they're not exported publicly
 // https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/DOMNamespaces.js#L8-L10
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
@@ -63,9 +73,10 @@ const validateElementType = (domElement: Element, elementType: ANY_ELEMENT_TYPE)
 
 // This is the internal implementation: the public entry points set elementType to an appropriate value
 const createPortalNode = <C extends Component<any>>(
-    elementType: ANY_ELEMENT_TYPE,
+    defaultElementType: ANY_ELEMENT_TYPE,
     options?: Options
 ): AnyPortalNode<C> => {
+    const elementType = options?.containerElement ?? defaultElementType;
     let initialProps = {} as ComponentProps<C>;
 
     let parent: Node | undefined;
@@ -85,7 +96,7 @@ const createPortalNode = <C extends Component<any>>(
             throw new Error(`Invalid element type "${elementType}" for createPortalNode: must be "div", "span" or "svg".`);
     }
 
-    if (options && typeof options === "object") {
+    if (options && typeof options === "object" && options.attributes) {
         for (const [key, value] of Object.entries(options.attributes)) {
             element.setAttribute(key, value);
         }
@@ -253,15 +264,12 @@ class OutPortal<C extends Component<any>> extends React.PureComponent<OutPortalP
 }
 
 const createHtmlPortalNode = createPortalNode.bind(null, ELEMENT_TYPE_HTML_BLOCK) as
-    <C extends Component<any> = Component<any>>(options?: Options) => HtmlPortalNode<C>;
-const createHtmlInlinePortalNode = createPortalNode.bind(null, ELEMENT_TYPE_HTML_INLINE) as
-    <C extends Component<any> = Component<any>>(options?: Options) => HtmlPortalNode<C>;
+    <C extends Component<any> = Component<any>>(options?: HtmlOptions) => HtmlPortalNode<C>;
 const createSvgPortalNode  = createPortalNode.bind(null, ELEMENT_TYPE_SVG) as
-    <C extends Component<any> = Component<any>>(options?: Options) => SvgPortalNode<C>;
+    <C extends Component<any> = Component<any>>(options?: SvgOptions) => SvgPortalNode<C>;
 
 export {
     createHtmlPortalNode,
-    createHtmlInlinePortalNode,
     createSvgPortalNode,
     InPortal,
     OutPortal,

stories/html.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 
-import { createHtmlPortalNode, createHtmlInlinePortalNode, InPortal, OutPortal } from '..';
+import { createHtmlPortalNode, InPortal, OutPortal } from '..';
 
 const Container = (props) =>
     <div style={{ "border": "1px solid #222", "padding": "10px" }}>
@@ -290,7 +290,7 @@ storiesOf('Portals', module)
         });
     })
     .add('can render inline portal', () => {
-        const portalNode = createHtmlInlinePortalNode();
+        const portalNode = createHtmlPortalNode({ containerElement: 'span' });
 
         return <div>
             <p>