Added elementType prop to component to override the default H1

README.md

@@ -87,19 +87,23 @@ import TypeWriterEffect from 'react-typewriter-effect';
 
 - text (must be a string): Required in sigle text display mode. The text in string.
 
-- multiText (array of string): Required in multi text mode
+- multiText (array of string): Required in multi text mode.
 
-- multiTextDelay (must be a number): delay before each text is erased in multi text display in milli seconds.
+- multiTextDelay (must be a number): delay before each text is erased in multi text display in milliseconds.
 
-- typeSpeed (must be a number): Speed of typing in milli seconds,
+- multiTextLoop creates a continous loop of the typewriter text (true/false).
 
-- startDelay (must be a number): Delay before animation starts in milli seconds
+- typeSpeed (must be a number): Speed of typing in milliseconds.
+
+- startDelay (must be a number): Delay before animation starts in milliseconds.
 
 - hideCursorAfterText (a boolean): it removes cursor after typing.
 
-- cursorColor (must be a string): color of the cursor
+- cursorColor (must be a string): color of the cursor.
+
+- elementType (a string or a React component): the element/component that will be wrapped around the typewriter-effect text.  Defaults to H1.
 
 - textStyle (must be an object): custom css styles can be applied to the text in this object.
 
-- scrollArea (must be a dom element): the scrollable area. By default it is document
+- scrollArea (must be a dom element): the scrollable area. By default it is the document.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-typewriter-effect",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "creating a typewriter effect using react",
   "main": "dist/index.js",
   "scripts": {

src/index.js

@@ -4,16 +4,17 @@ import './app.css';
 
 class TypeWriterEffect extends Component {
   state = {
-    text: '',
+    animate: false,
     blink: false,
+    element: this.props.elementType || 'h1',
+    eraseSpeedDelay: null,
     hideCursor: true,
-    animate: false,
-    typeSpeedDelay: null,
     multiTextDelay: null,
-    eraseSpeedDelay: null,
-    startDelay: null,
-    scrollAreaIsSet: null,
     multiTextLoop: false,
+    scrollAreaIsSet: null,
+    startDelay: null,
+    text: '',
+    typeSpeedDelay: null,
   };
 
   myRef = createRef();
@@ -135,18 +136,18 @@ class TypeWriterEffect extends Component {
   render() {
     return (
       <div ref={this.myRef} className={'react-typewriter-text-wrap'}>
-        <h1
+        <this.state.element
           style={{ ...this.props.textStyle }}
           className='react-typewriter-text'
         >
           {this.state.text}
-          <div
+          <span
             className={`react-typewriter-pointer ${
               this.state.blink && 'add-cursor-animate'
             } ${this.state.hideCursor ? 'hide-typing-cursor' : ''}`}
             style={{ backgroundColor: `${this.props.cursorColor}` }}
-          ></div>
-        </h1>
+          ></span>
+        </this.state.element>
       </div>
     );
   }

src/utils.js

@@ -76,6 +76,12 @@ export const propTypeValidation = {
         `Invalid ${propName} supplied to react-typeWriter component!`
       );
   },
+  elementType: (props, propName) => {
+    if (props[propName] && typeof props[propName] != 'string' && typeof props[propName] != 'function')
+      return new Error(
+        `Invalid ${propName} supplied to react-typeWriter component!`
+      );
+  },
   textStyle: (props, propName) => {
     if (props[propName] && typeof props[propName] != 'object')
       return new Error(