Properly handle void elements, like inputs.

Author: alexmacarthur

README.md

@@ -25,9 +25,7 @@ import TypeIt from "typeit-react";
 export default () => {
   return (
     <div className="App">
-      <TypeIt>
-        This will be typed in a `span` element!
-      </TypeIt>
+      <TypeIt>This will be typed in a `span` element!</TypeIt>
     </div>
   );
 };
@@ -41,11 +39,9 @@ The component will allow its children to fully render, and then type whatever HT
 import TypeIt from "typeit-react";
 
 // This could be any component that generates HTML.
-const SuperStrong = ({children}) => {
-  return (
-    <strong style={{fontSize: "80px"}}>{children}</strong>
-  )
-}
+const SuperStrong = ({ children }) => {
+  return <strong style={{ fontSize: "80px" }}>{children}</strong>;
+};
 
 export default () => {
   return (
@@ -98,13 +94,13 @@ export default () => {
 
 ### Fine-Tuning the Instance w/ Companion Methods
 
-TypeIt comes with a set of [special methods](https://typeitjs.com/docs#instance-methods) that let you fine-tune an animation down to the smallest detail. To leverage them here, pass a function as the `onBeforeInit` prop, which will give you access to the instance you can modify with these methods, and then return back to the component before the animation is initialized. 
+TypeIt comes with a set of [special methods](https://typeitjs.com/docs#instance-methods) that let you fine-tune an animation down to the smallest detail. To leverage them here, pass a function as the `onBeforeInit` prop, which will give you access to the instance you can modify with these methods, and then return back to the component before the animation is initialized.
 
 ```javascript
 import TypeIt from "typeit-react";
 
-<TypeIt  
-  getBeforeInit={(instance) => {
+<TypeIt
+  getBeforeInit={instance => {
     instance
       .type("Hi, I'm Alxe")
       .pause(750)
@@ -115,7 +111,7 @@ import TypeIt from "typeit-react";
     // Remember to return it!
     return instance;
   }}
-/>
+/>;
 ```
 
 ### Accessing the Instance After Initalization
@@ -127,26 +123,24 @@ export default () => {
   const [buttonText, setButtonText] = useState("Freeze");
   const [instance, setInstance] = useState(null);
 
-  const toggleFreeze = () => {  
-    if(instance.is('frozen')) {
+  const toggleFreeze = () => {
+    if (instance.is("frozen")) {
       instance.unfreeze();
-      setButtonText('Freeze');
+      setButtonText("Freeze");
       return;
-    }    
+    }
 
     instance.freeze();
-    setButtonText('Unfreeze');
-  }
+    setButtonText("Unfreeze");
+  };
 
   return (
     <div className="App">
-      <button onClick={toggleFreeze}>
-        {buttonText}
-      </button>
+      <button onClick={toggleFreeze}>{buttonText}</button>
 
-      <TypeIt  
+      <TypeIt
         options={{ loop: true }}
-        getAfterInit={(instance) => {  
+        getAfterInit={instance => {
           setInstance(instance);
           return instance;
         }}
@@ -155,7 +149,7 @@ export default () => {
       </TypeIt>
     </div>
   );
-}
+};
 ```
 
 ## Need Help?

dist/typeit-react.es.min.js

@@ -1,7 +1,8 @@
 {
   "name": "typeit-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React component for the most versatile JavaScript animated typing utility on the planet.",
+  "homepage": "https://typeitjs.com",
   "main": "dist/typeit-react.min.js",
   "module": "dist/typeit-react.es.min.js",
   "scripts": {
@@ -11,6 +12,11 @@
     "prettier": "prettier --write \"**/*.{md,js}\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "files": [
+    "dist/",
+    "src/",
+    "package-lock.json"
+  ],
   "bugs": {
     "url": "https://github.com/alexmacarthur/typeit-react/issues"
   },

dist/typeit-react.min.js

@@ -0,0 +1,25 @@
+// Reference: https://html.spec.whatwg.org/multipage/syntax.html#elements-2
+const voidElements: string[] = [
+    "area", 
+    "base", 
+    "br", 
+    "col",
+    "embed",
+    "hr", 
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+
+/**
+ * Given the name of an element, check if it's one of the "void" elements, 
+ * which cannot contain any children.
+ */
+export default (elementName: string): boolean => {
+    return voidElements.indexOf(elementName.toLowerCase()) > -1;
+}

package.json

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { default as TypeItCore } from 'typeit';
-const { useRef, useEffect, useState } = React;
+const { useRef, useEffect, useState, useMemo } = React;
+import isVoidElement from "./helpers/isVoidElement";
 
 export interface TypeItOptions {
     strings?: Array<string> | string
@@ -26,6 +27,9 @@ const TypeIt: React.FunctionComponent = (props: TypeItProps) => {
     const ref = useRef<HTMLElement|null>(null);
     const {options, element, children, getBeforeInit, getAfterInit, ...remainingProps} = props;
     const DynamicElement = element;
+    const elementIsVoid = useMemo(() => {
+        return isVoidElement(DynamicElement);
+    }, [DynamicElement]);
 
     /**
      * After the component mounts (and any children are rendered), 
@@ -67,9 +71,15 @@ const TypeIt: React.FunctionComponent = (props: TypeItProps) => {
 
     return (
         <div style={{ opacity: shouldRenderChildren ? 0 : 1}}>
-            <DynamicElement ref={ref} {...remainingProps}>
-                {shouldRenderChildren && children}
-            </DynamicElement>
+            {elementIsVoid 
+                ? <DynamicElement ref={ref} {...remainingProps} />
+                : 
+                    (
+                        <DynamicElement ref={ref} {...remainingProps}>
+                            {shouldRenderChildren && children}
+                        </DynamicElement>
+                    )
+            }
         </div>
     )
 }

src/helpers/isVoidElement.tsx

@@ -15,7 +15,7 @@
         "target": "es5", 
         "typeRoots": [
             "./node_modules/@types", 
-            "./types"
+            "src/types"
         ]
     },
     "exclude": [