diff --git a/README.md b/README.md index 621d896..50fdab4 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index dfae7a6..5ea88f2 100644 --- a/package.json +++ b/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": { diff --git a/src/index.js b/src/index.js index 8b31a66..e5e5ae9 100644 --- a/src/index.js +++ b/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 (
-

{this.state.text} -
-

+ > +
); } diff --git a/src/utils.js b/src/utils.js index 8220596..bb1e26a 100644 --- a/src/utils.js +++ b/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(