Make a couple of markups for the new attributes option

Move the explanation onto the docs for the method itself, and tweak
indentation and types within the code slightly.

Author: pimterry

README.md

@@ -111,13 +111,23 @@ Normally in `ComponentA`/`ComponentB` examples like the above, switching from `C
 
 How does it work under the hood?
 
-### `portals.createHtmlPortalNode`
+### `portals.createHtmlPortalNode([options])`
 
 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. Its plain DOM node is available at `.element`, so you can mutate that to set any required props (e.g. `className`) with the standard DOM APIs.
+This node will contain your portal contents later, within a `<div>`, and will eventually be attached in the target location.
 
-### `portals.createSvgPortalNode`
+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:
+
+```javascript
+const portalNode = portals.createHtmlPortalNode({
+	attributes: { id: "div-1", style: "background-color: #aaf; width: 100px;" }
+});
+```
+
+The div's DOM node is also available at `.element`, so you can mutate that directly with the standard DOM APIs if preferred.
+
+### `portals.createSvgPortalNode([options])`
 
 This creates a detached SVG DOM node. It works identically to the node from `createHtmlPortalNode`, except it will work with SVG elements. Content is placed within a `<g>` instead of a `<div>`.
 
@@ -144,13 +154,6 @@ It extra props to the InPortal (using the extra functionality we've attached to
 * Reverse portals tie rebuilding of the contents of the portal to InPortal (where it's defined), rather than the parent of the OutPortal (where it appears in the tree). That's great (that's the whole point really), but the contents of the InPortal will still be rebuilt anytime the InPortal itself is, e.g. if the InPortal's parent is rebuilt.
 * Be aware that if you call `create*PortalNode` in the render method of the parent of an InPortal, you'll get a different node to render into each time, and this will cause unnecessary rerenders, one every time the parent updates. It's generally better to create the node once and persist it, either using the useMemo hook, or in the initial construction of your class component.
 * By default, the types for nodes, InPortals and OutPortals allow any props and any components. Pass a component type to them to be more explicit and enforce prop types, e.g. `createHtmlPortalNode<MyComponent>`, `<portals.InPortal<MyComponent>>`, `<portals.OutPortal<MyComponent>>`.
-* You can pass `attributes` option to the `create*PortalNode` methods that would allow you to configure any attributes (style, class, etc.) to the intermediary div (or svg):
-
-```
-const portalNode = portals.createHtmlPortalNode({
-	attributes: { id: "div-1", style: "background-color: #aaf; width: 100px;" }
-});
-```
 
 ## Contributing
 

src/index.tsx

@@ -9,7 +9,7 @@ type ANY_ELEMENT_TYPE = typeof ELEMENT_TYPE_HTML | typeof ELEMENT_TYPE_SVG;
 
 type Options = {
     attributes: { [key: string]: string };
-  };
+};
 
 // 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
@@ -73,8 +73,8 @@ const createPortalNode = <C extends Component<any>>(
     }
 
     if (options && typeof options === "object") {
-        for (const [key, value] of Object.entries(options?.attributes)) {
-          element.setAttribute(key, value);
+        for (const [key, value] of Object.entries(options.attributes)) {
+            element.setAttribute(key, value);
         }
     }
 
@@ -236,9 +236,9 @@ class OutPortal<C extends Component<any>> extends React.PureComponent<OutPortalP
 }
 
 const createHtmlPortalNode = createPortalNode.bind(null, ELEMENT_TYPE_HTML) as
-    <C extends Component<any> = Component<any>>() => HtmlPortalNode<C>;
+    <C extends Component<any> = Component<any>>(options?: Options) => HtmlPortalNode<C>;
 const createSvgPortalNode  = createPortalNode.bind(null, ELEMENT_TYPE_SVG) as
-    <C extends Component<any> = Component<any>>() => SvgPortalNode<C>;
+    <C extends Component<any> = Component<any>>(options?: Options) => SvgPortalNode<C>;
 
 export {
     createHtmlPortalNode,